angular 4 嵌套的 formArray / formGroup 将数据库查询中的值放回表单中

Question

我有一个嵌套的 for 数组。我想编辑我的表单中的值，所以我做了一个数据库查询来获取要编辑的值，但我不能将它们（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 回答后:

Answer 1

它不应该像您的 getPerson 方法那样复杂，实际上没有 return 任何东西。

您可以使用以下代码：

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,
    })
  ))
}

我在这里 returning FormArray of FormGroups 是基于你的 personRows3 数组。

您也可以在Ng-run Example

中查看

angular 4 嵌套的 formArray / formGroup 将数据库查询中的值放回表单中

angular 4 nested formArray / formGroup put value back in form from DB query

javascript

path

nested-forms

angular

formarray