代码之家  ›  专栏  ›  技术社区  ›  mamesaye

Angular4嵌套formArray/formGroup将值从db查询返回到表单中

  •  0
  • mamesaye  · 技术社区  · 7 年前

    我有一个嵌套的for数组。我想编辑表单中的值,所以我执行了一个数据库查询来获取要编辑的值,但是我不能将它们(PersonRows3值)放在右侧的输入字段中。PersonRows3是一个嵌套的表单数组,它具有一个或多个表单组(Personi3,Person3)。请参见 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

    enter image description here

    这是一个 nonworking code . 我错过了什么?

    在@yurzui回答之后 :
    enter image description here

    1 回复  |  直到 7 年前
        1
  •  1
  •   yurzui    7 年前

    它不应该像在你的 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

    推荐文章