在 Angular 中动态禁用 FormArray

Question

我有多个复选框作为 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>

Answer 1

在 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

在 Angular 中动态禁用 FormArray

Dynamically Disable FormArray in Angular

angular

typescript

formarray

formgroups