json}} in below code.

Question

You were almost there... {{invoiceForm.controls[i].items.controls.itemName.value | json}}instead of:

<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>

You should write:

Answer 1

on

and then you could have seen that the

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

is a direct key of

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

, your only mistake was to refer which is wrong.

---

Here is a little extra for achieving the same outcome form ts file (hard coded to the first item):console.log(this.invoiceForm) ngOnInit我如何在HTML中访问ItemName的值。当我尝试访问时，它显示未定义 'item' 在下面的代码中，我如何访问ItemName的值。'controls' invoiceForm.controls[0]

我如何在HTML中访问ItemName的值。当我尝试{{invoiceForm.controls[i].items.controls.itemName.value}时，它显示未定义。