Question

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

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

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

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

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

所以问题-通过FormBuilder创建（而不是之后）时，有什么方法可以禁用整个FormGroup / FormArray吗？

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

Answer 1

使用小型助手创建FormGroup.disable后，您可以立即致电：

const disableFormGroup = (fg: FormGroup) => {fg.disable(); return fg}

form = this.fb.group({
    email: ['', [Validators.required, Validators.email]],
    password: disableFormGroup(this.fb.group({
        new: ['', Validators.required],
        confirm: ''
    }))
})

Answer 2

尝试：

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

Answer 3

我们可以为 AbstractControl

创建扩展

import {AbstractControl} from '@angular/forms';

declare module '@angular/forms' {
  interface AbstractControl {
    markAsDisabled(disable: boolean, onlySelf?: boolean): void;
    markAllAsDisabled(disable: boolean, onlySelf?: boolean): void;
  }
}

function markAsDisabled(disable: boolean, onlySelf?: boolean): void {
  if (disable) {
    this.disable();
  } else {
    this.enable();
  }

  if (this._parent && !onlySelf) {
    this._parent.markAsDisabled(disable, onlySelf);
  }
}

function markAllAsDisabled(disable: boolean, onlySelf?: boolean): void {
  this.markAsDisabled(disable, onlySelf);

  Object.keys(this.controls).forEach(k => {
    (this.controls[k] as AbstractControl).markAsDisabled(disable, onlySelf);
  });
}

AbstractControl.prototype.markAsDisabled = markAsDisabled;
AbstractControl.prototype.markAllAsDisabled = markAllAsDisabled;

然后致电

// Diabled
this.myFormGroup.markAllAsDisabled(true);

// Enabled
this.myFormGroup.markAllAsDisabled(false);

DEMO

Answer 4

看看下面的代码。

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

Answer 5

您还可以尝试动态禁用和启用表单控件

this.contactInfo = this.fb.group({
      email: ['', Validators.required],
      phone: ['', Validators.required]
    });
//disable form: only phone control
this.contactInfo.get('phone').disable();

//enable form :phone control
this.contactInfo.get('phone').enable();

Answer 6

除了找到刚创建的群组后，我没有找到更好的解决方案。

org.springframework.web.server.WebFilter

此解决方案比Luis Felipe Diaz Valbuena's更好，因为您不需要reactive每个字段。想象一下，要对10多个字段执行此操作。

使用FormBuilder创建禁用的表单组

6 个答案: