Angular 2 Reactive Forms 找不到控件
Angular 2 Reactive Forms cannot find control
我是 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);
您的模板存在一些问题,缺少一些 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>
我是 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);
您的模板存在一些问题,缺少一些 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>