Angular 4 Nested FormArrays Не удается прочитать свойство 'push' из null - PullRequest
Новая
       18

Angular 4 Nested FormArrays Не удается прочитать свойство 'push' из null

0 голосов
/ 01 мая 2018

I не может отправить в массив. у меня есть сегмент (идентификатор, время), который может иметь одного или нескольких человек (роль, информация). поля генерируются динамически. При загрузке на странице отображаются поля (см. Изображение ниже).
enter image description here
при попытке добавить человека я получаю сообщение об ошибке: ERROR TypeError: Cannot read property 'push' of null
Вот код .ts: 

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: ''
          })
        ])
    })
  ]),

.html код 

<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>

1 Ответ

0 голосов
/ 01 мая 2018

Вышеуказанная ошибка произойдет, если ваш personRows3 равен нулю или не имеет элементов.

Добавить проверку перед нажатием элементов, 

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