角2種活性形式無法找到控制

Question

進出口新帶活性形式和進出口試圖使具有分量indicadores與answers：

有了這個組件：

addAnswers(indicador: Indicador, answer?: any):void { 
    const indicadoresFormArray = <FormArray>this.customForm.controls['indicadores']; 

    let label = answer ? answer.label : ''; 
    let value = answer ? answer.value : ''; 

    let superi = 0; 
    for(let i = 0; i < indicadoresFormArray.length; i++) { 
     if(indicadoresFormArray.value[i].id == indicador.id) { 
      superi = i; 
     } 
    } 

    (<FormArray>(<FormGroup>(indicadoresFormArray).controls[superi]) 
    .controls['answers']).push(
     new FormGroup({ 
      label: new FormControl(label), 
      value: new FormControl(value) 
     }) 
    ) 
} 

而且模板

<div *ngFor="let indicador of customForm.controls['indicadores'].controls"> 
<div class="row" *ngFor="let answer of indicador.controls['answers'].controls"> 
    <div class="input-field col m5 s6"><input formControlName="label" placeholder="Etiqueta" /></div> 
    <div class="input-field col m5 s6"><input formControlName="value" placeholder="Valores" /></div> 
    <div class="input-field col m2 s12 center-align"> 
     <button type="button" class="btn-floating waves-effect waves-light" (click)="addAnswer()"><i class="material-icons">add</i></button> 
    </div> 
</div> 
</div> 

它總是拋出異常：

ERROR Error: Cannot find control with name: 'label' 
ERROR Error: Cannot find control with name: 'value' 

而且我沒有任何想法，爲什麼...

的console.log（indicadoresFormArray）;

Answer 1

有一些問題，你的模板，缺少幾個formArrayName的和formGroupName的。

每個FormArray需求有顯着的模板formArrayName="the name of the array"，如果您有嵌套，他們需要被標記在這種情況下，與索引（你從FormArray的迭代得到）的陣列內FormGroup的，像這樣：[formGroupName]="i"或formGroupName="{{i}}"。

所以你的模板應如下所示：

<!-- Mark formarray before iteration --> 
<div formArrayName="indicadores"> 
    <!-- Mark formGroupName in a div inside iteration or on the same line --> 
    <div *ngFor="let ctrl of customForm.get('indicadores').controls; let i = index" formGroupName="{{i}}"> 
    <label>Predefined</label> 
    <input type="checkbox" formControlName="predefined"> 
    <!-- Again mark the formarray.... and formgroupname below that --> 
    <div formArrayName="answers"> 
     <div *ngFor="let cont of ctrl.controls.answers.controls; let j=index" formGroupName={{j}}> 
     <input formControlName="label" placeholder="Etiqueta" /> 
     <input formControlName="value" placeholder="Valores" />   
     </div> 
    </div> 
    </div> 
</div> 

PLUNKER