在 Angular 中动态禁用 FormArray
Dynamically Disable FormArray in Angular
我有多个复选框作为 FormArray。当页面加载时,我想禁用所有这些复选框。
我尝试了下面提到的方法,但是没有用。
有人可以解释一下吗?
.ts 文件
public myForm: FormGroup = new FormGroup({
name: new FormControl('', Validators.required),
specialized: new FormArray([]),
});
ngOnInit(): void {
this.companyForm.controls['specialized'].disable();
}
get myFormArray() {
return this.myForm.controls.specialized as FormArray;
}
private addCheckboxesToForm() {
this.specilizedArea.forEach(() => this.myFormArray.push(new FormControl(false)));
}
.html 文件
<form [formGroup]="myForm">
<div class="form-check col-md-6"
*ngFor="let order of myFormArray.controls; let i = index">
<label formArrayName="specialized">
<input type="checkbox" [formControlName]="i">
{{specilizedArea[i]?.description}}
</label>
</div>
<button (click)="saveCompany()"> ADD</button>
</form>
在 ngOnInit
中,您需要调用方法 addCheckboxesToForm
并在该方法中使用 disabled: true
属性 创建 FormControls,它应该如下所示:
private addCheckboxesToForm() {
this.specilizedArea.forEach(() => this.myFormArray.push(new FormControl({value: false, disabled: true})));
}
这是我用您的代码创建的简单示例:https://stackblitz.com/edit/angular-ivy-bmnfcd?file=src/app/app.component.ts
我有多个复选框作为 FormArray。当页面加载时,我想禁用所有这些复选框。
我尝试了下面提到的方法,但是没有用。
有人可以解释一下吗?
.ts 文件
public myForm: FormGroup = new FormGroup({
name: new FormControl('', Validators.required),
specialized: new FormArray([]),
});
ngOnInit(): void {
this.companyForm.controls['specialized'].disable();
}
get myFormArray() {
return this.myForm.controls.specialized as FormArray;
}
private addCheckboxesToForm() {
this.specilizedArea.forEach(() => this.myFormArray.push(new FormControl(false)));
}
.html 文件
<form [formGroup]="myForm">
<div class="form-check col-md-6"
*ngFor="let order of myFormArray.controls; let i = index">
<label formArrayName="specialized">
<input type="checkbox" [formControlName]="i">
{{specilizedArea[i]?.description}}
</label>
</div>
<button (click)="saveCompany()"> ADD</button>
</form>
在 ngOnInit
中,您需要调用方法 addCheckboxesToForm
并在该方法中使用 disabled: true
属性 创建 FormControls,它应该如下所示:
private addCheckboxesToForm() {
this.specilizedArea.forEach(() => this.myFormArray.push(new FormControl({value: false, disabled: true})));
}
这是我用您的代码创建的简单示例:https://stackblitz.com/edit/angular-ivy-bmnfcd?file=src/app/app.component.ts