Angular 2 Reactive Forms无法找到控件-Java 学习之路

我是Reactive Forms的新手，我试图制作一个 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);
enter image description here

1 回答

您的模板存在一些问题，缺少一些 formArrayName 和 formGroupName .

每个 FormArray 都需要在模板 formArrayName="the name of the array" 中进行标记，如果你在数组中嵌套了 FormGroup ，则需要在这种情况下使用索引（从 FormArray 的迭代中获得）来标记，如下所示： [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

回复于 2024-04-28T23:08:18+08:00

Angular 2 Reactive Forms无法找到控件

1 回答

相关问题