javascript - Åtkomst till värde av formControl från formArray i reaktivt formulär i HTML

Hur får jag åtkomst till värdet av ItemName i HTML. Det står undefined när jag försöker {{invoiceForm.controls[i].items.controls.itemName.value | json}} i koden nedan.

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

Svar #1

Du var nästan där...

istället för:

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

Du bör skriva:

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

StackBlitz-exempel

För att kunna säga den exakta vägen att gå, kunde du bara ha skrivit ut formulärvärdet med console.log(this.invoiceForm) i ngOnInit och då kunde du ha sett att 'item' är en direkt nyckel i 'controls', ditt enda misstag var att hänvisa till invoiceForm.controls[0] vilket är fel.

Här är lite extra för att uppnå samma resultat från ts-filen (hårdkodat till det första objektet):

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

Svar #2

istället för {{invoiceForm.controls[i].items.controls.itemName.value | json}}

Prova detta i html :

{{getFormControlItem()[i].controls['dateofStay'].value}}

Komponent ts-kod :

getFormControlItem()
{
return ((this.invoiceForm.controls['items'] as FormArray).controls as FormGroup[])
}

detta kommer inte att utlösa detta fel: Egenskapen 'controls' finns inte på typen 'AbstractControl'.

Det här fungerade i mitt fall.