Angular 4 Nested FormArrays Cannot read property 'push' of null

Question

I cannot push to an array. i have a segment(id, time) that can have one or several people (role, infos). the field are generated dynamically. On load the page shows the fields (see image below).

when try to add a person I get error : ERROR TypeError: Cannot read property 'push' of null
Here is the .ts code:

addPerson(index: number) {
//let personRows3 = <FormArray>this.mySummaryForm.get('personRows3'); 
let personRows3 = <FormArray>this.mySummaryForm.get(`segmentRows3.${index}.personRows3`)
personRows3.push(this.fb.group({
    personR3: '',
    personI3: ''
}));

}

  segmentRows3: this.fb.array([
    this.fb.group({
        segmentId3: '',
        segmentTime3: '',
        personRows3: this.fb.array([
        this.fb.group({
           personR3: '',
           personI3: ''
          })
        ])
    })
  ]),

The .html code

<div formArrayName="segmentRows3">
  <div *ngFor=" let segmentRow of mySummaryForm.controls.segmentRows3.controls; let i=index " > 
    <div  class="form-group" [formGroupName]="i" >   {{i+1}}
    <label for="segmentId3">Segment ID
        <select formControlName="segmentId3"  formControlName="segmentId3" placeholder="pick" type="text" id="segmentId3" class="form-control" [(ngModel)]="levelNumSegment3" (ngModelChange)="toNumberSegment3()">
            <option *ngFor="let level of segmentId" [value]="level.num">{{level.name}}</option>
        </select> 
    </label>      
    <label for="segmentTime3">Segment time
        <input formControlName="segmentTime3" type="text" id="segmentTime3" class="form-control" placeholder="select a time" (ngModelChange)="onChange($event)">
    </label>    
        <div formArrayName="personRows3">
            <div *ngFor=" let personRow of segmentRow.controls.personRows3.controls; let j=index " >
                <div  class="form-group" [formGroupName]="j" >   {{j+1}}    
                    <label for="personR3">person Role 
                    <input formControlName="personR3" [typeahead]="personRole" [typeaheadOptionsLimit]="10" [typeaheadMinLength]="0" type="text" id="personR3" class="form-control" placeholder="select a role" (ngModelChange)="onChange($event)" >
                    </label>
                    <label for="personI">Person infos
                    <input formControlName="personI3" [typeahead]="states" [typeaheadOptionsLimit]="10" [typeaheadMinLength]="0" type="text" id="personI3" class="form-control" placeholder="select infos" (ngModelChange)="onChange($event)" >
                    </label>
                    <label><span (click)="deletePerson(j)" class="btn btn-danger">Remove</span></label>
                </div> 
            </div>
        </div>
        <br><button type="button" (click)="addPerson(j)" class="btn btn-info">Add a person</button><br><br><br>
    </div> 
  </div>
</div>

Sajeetharan · Accepted Answer · 2018-05-01 16:11:02Z

1

The above error will occur when your personRows3 is null or don't have elements.

Add a check before pushing the elements,

if(personRows3){
  personRows3.push(this.fb.group({
    personR3: '',
    personI3: ''
  }));
}

answered May 1, 2018 at 16:11

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

7 Comments

mamesaye Over a year ago

thanks. It seems like it is not seeing the index(undefined) when I try to add a person. Can you help?

Sajeetharan Over a year ago

you should have the button inside ngFor to get the index j to be passed.

mamesaye Over a year ago

if i put it in the ngfor it will show up with each added person.

Sajeetharan Over a year ago

otherwise j will be undefined always

mamesaye Over a year ago

ok, thanks. will continue working on it. I have one more question please: when i try to add a segment i have this error: ERROR Error: Cannot find control with path: 'segmentRows3 -> 1 -> segmentId3' why?

|

Collectives™ on Stack Overflow

Angular 4 Nested FormArrays Cannot read property 'push' of null

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related