Error: Cannot find control with path: 'FormArray -> FormControlName' Angular
Error: Cannot find control with path: 'FormArray -> FormControlName' Angular
这是我的表单结构:
this.formData = new FormGroup({
selectedAnimal: new FormArray([], [Validators.required]),
selectedTransport: new FormArray([], [Validators.required]),
roadName: new FormControl({ disabled: true, value: null }, Validators.required),
roadZip: new FormControl({ disabled: true, value: null }, Validators.required),
planeName: new FormControl({ disabled: true, value: null }, Validators.required),
planeZip: new FormControl({ disabled: true, value: null }, Validators.required)
});
对应HTML
<form [formGroup]="formData" (ngSubmit)="onSubmit()">
<div class="animal-checkbox-group" formArrayName="selectedAnimal">
<!-- multiple checkbox options, selecting one is mandatory -->
</div>
<div class="animal-checkbox-group" formArrayName="selectedTransport">
<!-- multiple checkbox options, selecting one is mandatory -->
<div class="if-checkbox-1-selected">
<!-- conditional checkbox: if checkbox is selected -> new new form controls -> they should be defined for successful validation -->
<input type="text" formControlName="roadName">
</div>
</div>
</form>
错误:
ERROR Error: Cannot find control with path: 'selectedTransport -> roadName'
在您的情况下,控件呈现在 formarray 抽象控件内,因此您必须需要为所有控件名称提供表单组,如下所述:
<div [formGroup]="formData">
Road Name: <input type="text" formControlName="roadName">
</div>
这是工作代码:stackblitz
这是我的表单结构:
this.formData = new FormGroup({
selectedAnimal: new FormArray([], [Validators.required]),
selectedTransport: new FormArray([], [Validators.required]),
roadName: new FormControl({ disabled: true, value: null }, Validators.required),
roadZip: new FormControl({ disabled: true, value: null }, Validators.required),
planeName: new FormControl({ disabled: true, value: null }, Validators.required),
planeZip: new FormControl({ disabled: true, value: null }, Validators.required)
});
对应HTML
<form [formGroup]="formData" (ngSubmit)="onSubmit()">
<div class="animal-checkbox-group" formArrayName="selectedAnimal">
<!-- multiple checkbox options, selecting one is mandatory -->
</div>
<div class="animal-checkbox-group" formArrayName="selectedTransport">
<!-- multiple checkbox options, selecting one is mandatory -->
<div class="if-checkbox-1-selected">
<!-- conditional checkbox: if checkbox is selected -> new new form controls -> they should be defined for successful validation -->
<input type="text" formControlName="roadName">
</div>
</div>
</form>
错误:
ERROR Error: Cannot find control with path: 'selectedTransport -> roadName'
在您的情况下,控件呈现在 formarray 抽象控件内,因此您必须需要为所有控件名称提供表单组,如下所述:
<div [formGroup]="formData">
Road Name: <input type="text" formControlName="roadName">
</div>
这是工作代码:stackblitz