在 HTML 中以反应形式从 formArray 访问 formControl 的值

Question

如何在 HTML 中访问 ItemName 的值。当我在下面的代码中尝试{{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 示例

---

为了告诉确切的路径，您可以在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);