我有一个嵌套数组。我想编辑表单中的值,所以我进行了数据库查询以获取要编辑的值,但是我无法将它们(personRows3值)放在正确的输入字段中。 personRows3是一个嵌套的表单数组,具有一个或多个表单组(personI3,personR3),请参见下面的seg_inf
。
我收到一个错误:
Error: Cannot find control with path: 'segmentRows3 -> 0 '
这是.html代码
<form *ngIf="row" [formGroup]="myEditSummaryForm" (ngSubmit)="saveASummary(myEditSummaryForm.value)">
<div class="container">
<div formArrayName="segmentRows3">
<div *ngFor=" let seg of seg_inf; let i= index " >
<div class="form-group" [formGroupName]="i" > <---error line----
<label for="segmentId3">Segment ID {{i+1}}
<input type="text" formControlName="segmentId3" id="segmentId3" class="form-control" value="{{i+1}}" >
</label>
<label><span *ngIf="seg_inf.length > 1" (click)="deleteSegment(i)" class="btn btn-danger">Remove segment</span></label>
<label for="segmentTime3">Segment time :
<timepicker formControlName="segmentTime3" (ngModel)="segmentTime3" [showMeridian]="isMeridian" [showSpinners]="showSpinners"> </timepicker> </label>
<button type="button" (click)="addPerson(i)" class="btn btn-info">Add a person</button>
{{seg.personRows3 |json}}<br>
<div formArrayName="personRows3">
<div *ngFor=" let per of seg.personRows3; let j=index " >
<div class="form-group" [formGroupName]="j"> #{{j+1}}
<label for="personR3">Segment type
<input formControlName="personR3" [typeahead]="personRole" type="text" id="personR3" class="form-control">
</label>
<label for="personI3">Person name
<input formControlName="personI3" [typeahead]="states" type="text" id="personI3" class="form-control">
</label>
<label><span *ngIf="seg_inf.length > 1" (click)="deletePerson(i,j)" class="btn btn-warning">Remove</span></label>
</div>
</div>
</div>
<label for="topic">Topic</label>
<textarea formControlName="topic" id="topic" class="form-control" (ngModelChange)="onChange($event)"></textarea>
</div>
</div>
</div>
<button type="button" (click)="addSegment(i)" class="btn btn-primary">Add a segment</button>
</div>
<div>
<button class="btn btn-success form-control"
(click)="saveASummary(myEditSummaryForm.value)"> Save update(s)</button>
</div>
</form>
这是.ts代码
for (var i = 0, len = this.seg_inf.length; i < len; i++) {
let segmentRows3 = <FormArray>this.myEditSummaryForm.get('segmentRows3');
segmentRows3.push(
this.fb.group({
segmentTime3: this.seg_inf[i].segmentTime3,
segmentId3: i+1,
topic: this.seg_inf[i].topic,
PersonRows3: this.getPerson(this.seg_inf, i), //function call
})
);
}
getPerson(s_i: any[], index: number) {
let s_i_prl = s_i[index].personRows3.length;
let s_i_pr = s_i[index].personRows3;
// get all people for that segment
for (var j = 0, lenj=s_i_prl; j < lenj; j++) {
let personRows3 = <FormArray>this.myEditSummaryForm.get(`segmentRows3.${index}.personRows3`)
this.fb.array([
this.fb.group({
personR3: s_i_pr[j].personR3,
personI3: s_i_pr[j].personI3,
})
])
}
}
this.seg_inf = [{"segmentTime3":"2018-05-23T14:20:00.051Z","segmentId3":"","topic":"topic1",
"personRows3":[{"personR3":"HS - host","personI3":"California"},{"personR3":"GS - guest","personI3":"Alaska"}]},
{"segmentTime3":"2018-05-23T14:30:00.533Z","segmentId3":"","topic":"topic2",
"personRows3":[{"personR3":"HS - host","personI3":"Arizona"}]}]
一切正常,直到我尝试填写personRows3的输入字段!
您可以在
{{seg.personRows3 |json}}
之后看到Add a person button
这是nonworking code。我想念什么?
@yurzui回答之后:
最佳答案
它不应该像您的getPerson
方法中那样复杂,实际上不返回任何内容。
您可以使用以下代码:
personRows3: this.getPerson(this.seg_inf[i].personRows3);
...
getPerson(personRows: any[]) {
return this.fb.array(
personRows.map(p => this.fb.group({
personR3: p.personR3,
personI3: p.personI3,
})
))
}
在这里,我返回基于您的
FormArray
数组的FormGroups
的personRows3
。您也可以在Ng-run Example中对其进行检查