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.