Я не могу толкать массиву.
У меня есть сегмент (идентификатор, время), в котором может быть один или несколько человек (роль, информация). поля генерируются динамически. При загрузке на странице отображаются поля (см. Изображение ниже) .
при попытке добавить человека я получаю ошибку: 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>
Вышеупомянутая ошибка возникает, когда ваш personRows3
равен нулю или не имеет элементов.
Добавьте чек перед тем, как нажимать элементы,
if (personRows3){
personRows3.push(this.fb.group({
personR3: '',
personI3: ''
}));
}
у вас должна быть кнопка внутри ngFor, чтобы передать индекс j.
если я помещу его в ngfor, он будет отображаться с каждым добавленным человеком.
в противном случае j всегда будет неопределенным
хорошо спасибо. продолжу работу над этим. У меня есть еще один вопрос: когда я пытаюсь добавить сегмент, у меня появляется такая ошибка: ERROR Error: Cannot find control with path: 'segmentRows3 -> 1 -> segmentId3'
почему?
размещение addPers (i) перед <div formArrayName = "personRows3"> убирает кнопку дублирования pb.
ответ на мою другую ошибку: stackoverflow.com/questions/50122957/…
Благодарю. Похоже, что он не видит индекс (undefined), когда я пытаюсь добавить человека. Вы можете помочь?