formArray – Cannot find path to array of arrays

You can try below html:

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <div formArrayName="arr" *ngFor="let a of arr.controls; let i = index">  <!-- arr getter is called -->
    <div [formGroupName]="i" style="margin-bottom: 10px;">
      <input type="text" name="name" formControlName="name">
      <label for="pay">Pay:</label>
      <input type="text" name="pay" formControlName="pay">
      <div formArrayName="scores"> <!-- Property binding is not required  -->
      <div  *ngFor="let _ of scores(i).controls; let g = index"> <!-- inner FormArray is retrieved based on index -->
      <input type="text"  [formControlName]="g">
    </div></div></div></div>
  <button type="submit">Submit</button>
</form>

and define appropriate getter and method to get hold of the FormArray as:

// returns the outer FormArray
get arr(): FormArray {
  return this.myForm.get('arr') as FormArray;
}

// returns the inner FormArray based on the index 
scores(index: number): FormArray {
  return this.arr.at(index).get('scores') as FormArray;
}

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top