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

Can you also post code of addInventoryFieldsList property? — yurzui
– yurzui, Commented May 10, 2018 at 11:39

yurzui · Accepted Answer · 2018-05-10 11:51:18Z

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

edited May 10, 2018 at 11:51

answered May 10, 2018 at 11:42

yurzui

215k32 gold badges450 silver badges413 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Muhammad Arslan Over a year ago

i declared addInventoryFieldsList, i do not have any error if i do not try to display nested forArray

yurzui Over a year ago

Updated example ng-run.com/edit/WsXrq6fufRFoT1siG9nG It still works for me

Muhammad Arslan Over a year ago

yes you are right, its working there but still not on my machine :(

yurzui Over a year ago

I don't think so. Something is different) Can you recreate example?

Muhammad Arslan Over a year ago

html and ts code is 100%, now its display it for 1 sec and then gives same error

|

Antonio · Accepted Answer · 2018-05-10 11:54:47Z

1

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>

answered May 10, 2018 at 11:54

Antonio

6545 silver badges18 bronze badges

5 Comments

yurzui Over a year ago

Add two groups to addInventoryFieldsList and enjoy error) stackblitz.com/edit/angular-8dy7mz?file=src/app/…

Muhammad Arslan Over a year ago

@yurzui means ?

Antonio Over a year ago

@yurzui not sure if your update to my stackblitz was what Arslan meant, the question didn't give much information, but your answer was very rude. Be more polite next time!

yurzui Over a year ago

Sorry if my answer was rude for you. I just wanted to say that your nested ngFor is not correct. I will be more polite next time

yurzui Over a year ago

I think that to be rude is to downvote and don't say what's the reason.

Padmapriya Vishnuvardhan · Accepted Answer · 2018-05-10 11:35:42Z

0

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

answered May 10, 2018 at 11:35

Padmapriya Vishnuvardhan

2,16616 silver badges18 bronze badges

2 Comments

Muhammad Arslan Over a year ago

its declared, everything is fine if i do not try to show nested formarray

Padmapriya Vishnuvardhan Over a year ago

Can you try with <div formArrayName="buildTableFields" *ngFor="let fields of address.controls.buildTableFields.controls; let x = index;"> <span [formGroupName]="x">ABC</span> </div>

Collectives™ on Stack Overflow

Display FormArray in another FormArray in Angular6

3 Answers 3

6 Comments

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related