在 HTML 中以反應形式從 formArray 訪問 formControl 的值

Question

如何訪問 HTML 中 ItemName 的值。 當我嘗試{{invoiceForm.controls[i].items.controls.itemName.value | json}}時顯示未定義 {{invoiceForm.controls[i].items.controls.itemName.value | json}}在下面的代碼中。

<form [formGroup]="invoiceForm">

<div formArrayName="items" *ngFor="let item of items.controls; let i=index;">

  <div [formGroupName]="i">
      <input type="text" formControlName="itemName">
      <input type="number" formControlName="itemQty">       
      <input type="number" formControlName="itemPrice">
  </div>  

  Item name:  {{invoiceForm.controls[i].items.controls.itemName.value | json}}

</div>
</form>

Answer 1

你幾乎就在那里...

代替：

{{invoiceForm.controls[i].items.controls.itemName.value | json}}

你應該寫：

{{invoiceForm.controls['items'].controls[i].controls.itemName.value | json}}

StackBlitz示例

---

為了告訴 go 的確切路徑，您可以在ngOnInit上使用console.log(this.invoiceForm)打印表單值，然后您可以看到'item'是'controls'的直接鍵，您的唯一的錯誤是引用invoiceForm.controls[0]這是錯誤的。

這是實現與 ts 文件相同的結果的一些額外內容（硬編碼到第一項）：

console.log(this.invoiceForm);
const itemControls = <FormArray>this.invoiceForm.controls['items'];
const itemFormGroup = <FormGroup>itemControls.controls[0];
console.log(itemFormGroup.controls["itemName"].value);