javascript - 在 HTML 中以 react 形式从 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例子

为了告诉确切的路径，您可以使用 console.log(this.invoiceForm) 打印表单值。在 ngOnInit然后你可以看到 '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);