angular 4 嵌套 formArray 找不到路径为:'segmentRows3 -> 1 -> segmentId3' 的控件
angular 4 nested formArray Cannot find control with path: 'segmentRows3 -> 1 -> segmentId3'
我无法将推送到数组。
我有一个段(id,时间),可以有一个或几个人(角色,信息)。该字段是动态生成的。加载页面时显示字段(见下图)。
尝试添加段时出现错误:ERROR TypeError: Cannot find control with path: 'segmentRows3 -> 1 -> segmentId3'
这是 .ts 文件中的代码:
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>
当我尝试添加时,它添加了段(id、时间)而不是人(角色、信息),这与加载时不同(下图),并抛出错误:ERROR TypeError: Cannot find control with path: 'segmentRows3 -> 1 -> segmentId3'
。为什么?
您将 FormArray
添加到 segmentRow3
数组,而您的模板只需要 FormGroup
:
segmentRows3.push(this.fb.array([
^^^^^^^^^^^^^^
why?
this.fb.group({
所以,尝试将其更改为:
segmentRows3.push(
this.fb.group({
segmentTime3: '',
segmentId3: '',
personRows3: this.fb.array([
this.fb.group({
personR3: '',
personI3: ''
})
])
})
);
我无法将推送到数组。
我有一个段(id,时间),可以有一个或几个人(角色,信息)。该字段是动态生成的。加载页面时显示字段(见下图)。
尝试添加段时出现错误:ERROR TypeError: Cannot find control with path: 'segmentRows3 -> 1 -> segmentId3'
这是 .ts 文件中的代码:
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>
当我尝试添加时,它添加了段(id、时间)而不是人(角色、信息),这与加载时不同(下图),并抛出错误:ERROR TypeError: Cannot find control with path: 'segmentRows3 -> 1 -> segmentId3'
。为什么?
您将 FormArray
添加到 segmentRow3
数组,而您的模板只需要 FormGroup
:
segmentRows3.push(this.fb.array([
^^^^^^^^^^^^^^
why?
this.fb.group({
所以,尝试将其更改为:
segmentRows3.push(
this.fb.group({
segmentTime3: '',
segmentId3: '',
personRows3: this.fb.array([
this.fb.group({
personR3: '',
personI3: ''
})
])
})
);