基于FormArray索引的角4 FormArray

Question

我希望在用户在空创建的控件中添加值之后更新formArray。

目前，当用户选择添加一个新项时，我会使用空值将其构建到formArray上。

buildItem(item?: any, key?: any): FormGroup {
  // Item will pass undefined for initial buildItem in onLoad and new items
  let itemName: string;
  let keyValue: string;
  if (item === undefined) { 
     itemName = ''; key = '' }  
  else { 
     itemName = item.name; keyValue = key 
  };

  /**
   * Builds a single item for form group array in the collectionForm.
   */
   return this.formBuilder.group({ 
                item: [itemName || '', Validators.required], 
                properties: { item, key: key } || {} });
}

对于已经添加的项的初始创建和更新来说，这很好。问题在于添加了空值的新项。当我添加一个新项时，我需要在properties.key中添加来自防火墙的返回键

在保存新项的方法中，我添加了一个patchValue

this.items.patchValue([{ 
         // item being returned from firebase promise
         item: item.name, 
         properties: { item: item.name, key: item.$key' } 
}]);

然而，patchValue根本不起作用。当我尝试更新那个新值时，尽管这些值已经保存到firebase中，但我仍然会得到作为空值或在初始BuildItem()上设置的保存值的返回，而不是patchValue中更新的值。

我在棱角FormArray文档中看到

它接受一个与控件结构匹配的数组，将尽最大努力将这些值与组中的正确控件匹配。参考

这是否意味着它可能也可能不会更新该值。它会尽力去尝试吗？我想，如果我可以为我想要修补的值添加索引，那么它就根本不是一个问题。就像removeAt(idx)一样

所以如果我能写出这样的东西

this.form.patchValue.atIndex(this.idx,[{ 
         item: item.name, 
         properties: { item: item.name, key: item.$key' } 
}];

但我不确定我能不能..。可以肯定的是，这种形式是不可能的。是否有任何方法专门针对在formArray中修补的项目，或者我可能没有正确地理解这一点。

我可以通过将新的值推到formArray上来解决这个问题。

this.items.push(this.buildItem(...));

不过，我得补充一下

this.items.removeAt(this.idx); 

为了删除空构建上的初始控件，这看起来不像是任何好代码。

Answer 1

使用FormArray#at + AbstractControl#patchValue

this.items.at(index).patchValue(...);

演示

Answer 2

如果要更新洞数组结构，只需创建一个新的FormControl就可以做到这一点：

this.form.setControl('items',  new FormControl(arrayItemsValue));

或在更新所有项目之前删除它们：

const items = (<FormArray>this.form.get('items'));
 for (let i = 0; i < items.length; i++) {
     items.removeAt(i);
 }
 this.form.get('items').setValue(arrayItemsValue);

Answer 3

正如developer033所说：

使用FormArray#at + AbstractControl#patchValue

但是怎么做呢？下面是一个例子：

HTML中的：

<div formArrayName="alternateEmail" *ngFor="let control of alternateEmail.controls; index as i">
  <input type="text" placeholder="Type an alternative email" [formControlName]="i"><input>
</div>

类中的：

get alternateEmail(){  return this.registrationForm.get('alternateEmail') as FormArray }

而实际的贴片方法是：

patchDynamicFormBlockValue(){
  this.alternateEmail.at(<index>).patchValue('patchmail@gmail.com')
}

您还可以在需要时移除as FormArray并强制转换：

(<FormArray>this.alternateEmail).at(<index>).patchValue('test@gmail.com')