Access value of formControl from formArray in reactive form in HTML

Question

How do I access value of ItemName in HTML. It says undefined when I try {{invoiceForm.controls[i].items.controls.itemName.value | json}} in below code.

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

Inveigle

Answer 1

You were almost there...

instead of:

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

You should write:

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

StackBlitz example

---

In order to tell the exact path to go, you could have just print the form value with console.log(this.invoiceForm) on ngOnInit and then you could have seen that the 'item' is a direct key of 'controls', your only mistake was to refer invoiceForm.controls[0] 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);
const itemControls = <FormArray>this.invoiceForm.controls['items'];
const itemFormGroup = <FormGroup>itemControls.controls[0];
console.log(itemFormGroup.controls["itemName"].value);

Brahms

Its showing value but in visual editor it shows it as error. – Inveigle

Identifier 'controls' is not defined. 'AbstractControl' does not contain such a member. This as error. – Inveigle

stackblitz.com/edit/angular-ivy-kzkxwu I tried here same, but getting this error. Can you check what's missing – Inveigle

What exactly is the problem? – Brahms

{{invoiceForm.controls['items'].controls[i].controls.itemName.value | json}} I've tried this with my form but it throws error : Property 'controls' does not exist on type 'AbstractControl'. stackblitz.com/edit/angular-ivy-kzkxwu – Inveigle

It is because you will need to print the {{invoiceForm....}} inside the div with the ngFor, otherwise you won't have access to i – Brahms

stackblitz.com/edit/angular-ivy-kzkxwu It is inside div, but it look like its issue of using controls. – Inveigle

Identifier 'controls' is not defined. 'AbstractControl' does not contain such a member. – Mors

Hey @AbhijeetRaj, not sure where you are getting this error message maybe on your local, check this out: angular-8i9sca.stackblitz.io it is free of errors – Brahms

Answer 2

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

Try this in html :

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

Component ts code :

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

this will not throw this error : Property 'controls' does not exist on type 'AbstractControl'.

This workerd in my case .

Photomontage

use get: {{invoiceForm.get('items.'+i+'.itemName')?.value}} or {{invoiceForm.value?.items[i].itemName}}. The "safe operator" (the ? before the .) say to Angular that if the element is null not show nothing.) – Inhaler

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Gold