Display FormArray in another FormArray in Angular6

Question

I'm trying to display form array inside another formarray but it gives me an error, Cannot read property 'controls' of undefined

here is my code

addInventoryFormGroup() {
    this.addInventoryForm = this.fb.group({
        addInventoryFieldsList: this.fb.array([this.buildAddInventoryFields()]),
    });
}

buildAddInventoryFields(): FormGroup {
    return this.fb.group({
        buildTableFields: this.fb.array([this.buildAddInventoryTableFields()]),
        quantity: '',
        section: '',
        row: '',
    })
}

buildAddInventoryTableFields(): FormGroup {
    return this.fb.group({
        unitCost: '',
        faceValue: '',
    })
}

get addInventoryFieldsList(): FormArray {
    return <FormArray>this.addInventoryForm.get('addInventoryFieldsList');
}

here is my html code for it

<form [formGroup]="addInventoryForm">
     <div class="reactive-form" formArrayName="addInventoryFieldsList" *ngFor="let address of addInventoryFieldsList.controls; let i = index;">
          <div [formGroupName]="i">
               <div formArrayName="buildTableFields" *ngFor="let fields of addInventoryFieldsList.controls.buildTableFields.controls; let x = index;">
                    <span [formGroupName]="x">ABC</span>
               </div>   
          </div>
     </div>
</form>   

Please help me to fix this error

Answer 1

Since i don't see you declared addInventoryFieldsList i suspect that is your problem.

You should write addInventoryForm.controls.addInventoryFieldsList to access addInventoryFieldsList FormArray control.

The following should work for you:

<form [formGroup]="addInventoryForm">
    <div class="reactive-form" formArrayName="addInventoryFieldsList" *ngFor="let address of addInventoryForm.controls.addInventoryFieldsList.controls; let i = index;">
        <div [formGroupName]="i">
            <div formArrayName="buildTableFields" *ngFor="let fields of address.controls.buildTableFields.controls; let x = index;">
                <span [formGroupName]="x">ABC</span>
            </div>
        </div>
    </div>
</form>

Also note i use address.controls.buildTableFields.controls to loop over nested controls

Update:

As it turned out you have defined addInventoryFieldsList getter. So here is updated template:

<form [formGroup]="addInventoryForm">
    <div class="reactive-form" formArrayName="addInventoryFieldsList" *ngFor="let address of addInventoryFieldsList.controls; let i = index;">
        <div [formGroupName]="i">
            <div formArrayName="buildTableFields" *ngFor="let fields of address.controls.buildTableFields.controls; let x = index;">
                <span [formGroupName]="x">ABC</span>
            </div>
        </div>
    </div>
</form>

Ng-run Example

Answer 2

This post might help you... https://alligator.io/angular/reactive-forms-formarray-dynamic-fields/ Be sure to load the form before using it

ngOnInit() {
   this.addInventoryForm = this.fb.group({
    addInventoryFieldsList: this.fb.array([this.buildAddInventoryFields()]),
   });
}... follow with your methods

HTML

   <form [formGroup]="addInventoryForm">
 <div class="reactive-form" formArrayName="addInventoryFieldsList" *ngFor="let address of addInventoryForm.get('addInventoryFieldsList').controls; let i = index;">
      <div [formGroupName]="i">
           <div formArrayName="buildTableFields" *ngFor="let fields of addInventoryForm.get('addInventoryFieldsList').controls; let x = index;">
                <span [formGroupName]="x">ABC</span>
           </div>   
      </div>
 </div>

Answer 3

Please check addInventoryFieldsList which might not be a declared variable in your ts file.