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

angular 4嵌套formArray找不到路径为“segmentRows3->1->segmentId3”的控件

formarray nested path angular javascript

-1

mamesaye · 技术社区 · 7 年前

我 无法推送 到阵列。我有一个段(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、时间),但不会添加人(角色、信息),这与加载时不同(下图),并引发错误: 错误类型错误:找不到路径为“segmentRows3->”的控件;1->分段ID3' 为什么?

1 回复 | 直到 7 年前

1

3

yurzui 7 年前

您正在添加 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: ''
      })
    ])
  })
);