Angular2 3rd level FormArray nesting,

Question

createForm() {
    this.myForm = this.fb.group({
        name: '',
        lvl2: this.fb.array([
            this.initLvl2(),
        ])
    })
}

<form [formGroup]="myForm" novalidate>
<div formArrayName="lvl2">
    <div *ngFor="let lvl2s of myForm.controls.lvl2.controls; let i=index let last=last">
        <div class="panel-body" [formGroupName]="i"> 
                <div *ngFor="let lvl3 of lvl2s.controls.lvl3.controls; let i=index let last=last" formArrayName="lvl3">
                    <div class="panel-body" [formGroupName]="i">
                              <div class="margin-20">
                                        <button md-raised-button type="button" *ngIf="last" (click)="add()" style="cursor: default">Add Action</button>
                                    </div>
                    </div>
                </div>
        </div>
    </div>

initLvl2() {
    return this.fb.group({
        name: '',
        lvl3: this.fb.array([
            this.initLvl3()
        ])
    })
}

initLvl3() {
    return this.fb.group({
        parameters: '',
        wait_time: ''
    })
  }

  add(){
  const control = <FormArray>this.myForm.get('lvl2.lvl3')
  control.push(this.initLvl3());
}

And for some hours, trying everything I got some errors Cannot read property 'push' of null, how to deal with that? I am tired with this, there were several questions but mostly without good reply

developer033 · Accepted Answer · 2018-05-01 17:08:53Z

2

Since lv2 is an Array, you must pass the index from template to component in order to get the lv3 form group related to:

Change your function to:

add(index: number): void {
  const arr = this.myForm.get(`lvl2.${index}.lvl3`) as FormArray;
  arr.push(this.initLvl3());
}

edited May 1, 2018 at 17:08

answered May 3, 2017 at 22:00

developer033

25k8 gold badges85 silver badges113 bronze badges

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

3 Comments

Piotr Kaliński Over a year ago

Check my html, i might be missing sth.

developer033 Over a year ago

@PiotrKaliński I can't where you're calling add function.. Anyway, in the second *ngFor do this: let j = index and [formGroupName]="j".

developer033 Over a year ago

@PiotrKaliński As I said, you must pass the index.. (click)="add(i)"

Collectives™ on Stack Overflow

Angular2 3rd level FormArray nesting,

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related