使用FormBuilder创建禁用的表单组

Question

假设我们有myFormGroup通过FormBuilder初始化的：

this.myFormGroup = this.fb.group(
  {
    field1: ['', SomeValidator1],
    field2: ['', AnotherValidator2],
    field3: [''],
    ...
  }
);

我知道我们可以禁用特定的表单控件，例如：

fb.control({value: 'my val', disabled: true});

当然，我可以在示例中使用此语法，并将组中的每个控件标记为已禁用。但是表单组可能有很多控件。

因此，问题-是否有任何方法可以在通过FormBuilder 创建（而不是之后）禁用整个FormGroup / FormArray的同时？

ps我问这个问题的原因是因为我需要有条件地初始化具有不同类型用户权限的活动或禁用字段的表单组。

Answer 1

我遇到了同样的问题，Angular FormBuilder 接收控制的初始状态，并验证参数是否类似于 { value: any, disabled: boolean, ..... } 如果参数满足此结构，则使用 value 和禁用/激活。

尝试：

this.myFormGroup = this.fb.group(
  {
    field1: [{ value: '', disabled: true }, SomeValidator1],
    field2: [{ value:'', disabled: true }, AnotherValidator2],
    field3: [{ value:'', disabled: true}],
    ...
  }
);

Answer 2

试试这个代码：

enableForm(group: FormGroup, enable:boolean) {
   for (const i in group.controls) {
      if(enable) {
        group.controls[i].enable();
      } else {
        group.controls[i].disable();
      }
   }
}