基於 FormArray 索引的 Angular 4 patchValue

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添加來自 firebase 的返回鍵

在保存該新項目的方法中，我添加了一個patchValue

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

但是patchValue根本不起作用。 當我嘗試更新該新值時，盡管這些值已保存到 firebase，但我仍然將這些值返回為空或在初始BuildItem()上設置的保存值而不是patchValue的更新值

我在 angular FormArray Documentation 上看到

它接受一個與控件結構相匹配的數組，並將盡最大努力將值與組中的正確控件匹配。 參考文獻

這是否意味着它可能會也可能不會更新該值……它只會盡力嘗試？ 我想如果我可以為我想要修補的值添加索引，那么它根本不應該是一個問題。 就像removeAt(idx)

所以如果我能寫出類似的東西

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

但不確定我能做到這一點……很確定它不可能以這種形式出現。 有什么方法可以專門針對在formArray打補丁的項目，或者我可能沒有正確理解這一點。

我可以通過將新值推送到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')

Answer 4

在 TS 文件中使用下面作為示例

let taskListArrays = this.projectParentForm.get('TaskList') as FormArray;
        
taskListArrays.controls[rowindex].patchValue({"Email":"contacttotanuj@gmail.com"};

Answer 5

let rows = this.manageOrderForm.get('ordersForm') as FormArray;
    rows.controls[this.index].patchValue({totalAmount:totalPrice});
    this.index = this.index + 1;

formarray 在索引處設置值

((this.form.get('controls') as FormArray).at(index) as FormGroup).get('description').patchValue(item.description);