Доступ к значению formControl из formArray в реактивной форме в HTML

Question

Как мне получить доступ к значению ItemName в HTML. Когда я пробую {{invoiceForm.controls[i].items.controls.itemName.value | json}} в приведенном ниже коде, он говорит undefined.

<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, вы могли бы просто напечатать значение формы с 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);