角4嵌套formArray找不到带有路径的控件:'segmentRows3-> 1-> segmentId3' [英] angular 4 nested formArray Cannot find control with path: 'segmentRows3 -> 1 -> segmentId3'
问题描述
我无法推送到数组.
我有一个细分(id,时间),可以有一个或几个人(角色,信息).该字段是动态生成的.加载时,页面显示字段(请参见下图).
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).
当尝试添加细分时,出现错误:ERROR TypeError: Cannot find control with path: 'segmentRows3 -> 1 -> segmentId3'
这是.ts文件中的代码:
When try to add a segment I get error : ERROR TypeError: Cannot find control with path: 'segmentRows3 -> 1 -> segmentId3'
Here is code from the .ts file:
addSegment() {
let segmentRows3 = this.mySummaryForm.get('segmentRows3') as FormArray;
segmentRows3.push(this.fb.array([
this.fb.group({
segmentTime3: '',
segmentId3: '',
personRows3: this.fb.array([
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">
<label><h2>New segment</h2></label>
<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" 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>
<button type="button" (click)="addPerson(i)" class="btn btn-info">Add a person</button><br><br>
<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="personI3">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><br><br>
</div>
</div>
</div>
</div>
</div>
</div>
<br><button type="button" (click)="addSegment()" class="btn btn-primary">Add a segment</button>
当我尝试添加时,与加载(下图)不同,它添加了segment(id,time)但未添加人员(roles,infos),并抛出错误:ERROR TypeError: Cannot find control with path: 'segmentRows3 -> 1 -> segmentId3'
.为什么?
When i try to add it adds the segment(id, time) but not the person (role, infos) unlike on load (image below), and throws error : ERROR TypeError: Cannot find control with path: 'segmentRows3 -> 1 -> segmentId3'
. Why?
推荐答案
您正在将FormArray
添加到segmentRow3
数组中,而模板只需要FormGroup
:
You're adding FormArray
to segmentRow3
array whilst your template expects only FormGroup
:
segmentRows3.push(this.fb.array([
^^^^^^^^^^^^^^
why?
this.fb.group({
因此,尝试将其更改为:
So, try changing it to:
segmentRows3.push(
this.fb.group({
segmentTime3: '',
segmentId3: '',
personRows3: this.fb.array([
this.fb.group({
personR3: '',
personI3: ''
})
])
})
);
这篇关于角4嵌套formArray找不到带有路径的控件:'segmentRows3-> 1-> segmentId3'的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!