如何禁用 FormGroup 中的所有 FormControl

Posted 2023-03-13

【中文标题】如何禁用 FormGroup 中的所有 FormControl

【英文标题】：How to disable all FormControls inside a FormGroup

【发布时间】：2018-01-06 20:12:30

【问题描述】：

我有这个反应式 Angular Form 结构：

myForm: FormGroup;
Personal: FormGroup;
FIRST_NAME: FormControl;
LAST_NAME: FormControl;
ngOnInit(): void 
    this.createFormControls();
    this.createForm();

createFormControls() 
    this.FIRST_NAME = new FormControl('', [Validators.required]);
    this.LAST_NAME = new FormControl('', [Validators.required]);

createForm(): void 
    this.myForm = this.fb.group(
        Personal: this.fb.group(
            FIRST_NAME: this.FIRST_NAME,
            LAST_NAME: this.LAST_NAME,
        )
    )

如果我这样做：

this.FIRST_NAME.disable();

它禁用 FormControl。

如何禁用PersonalFormGroup 中的所有FormControls

【参考方案1】：

您可以禁用整个表单 this.Personal.disable();

或者您可以枚举所有表单控件并一个一个禁用/启用它们

for (var control in this.Personal.controls) 
    this.Personal.controls[control].disable();

【讨论】：

this.Personal.disable();不适用于嵌套的 FormGroup bt 适用于整个表单。

【参考方案2】：

您可以像这样禁用控制。所以你的表单构建器应该是这样的：

createForm(): void 
    this.myForm = this.fb.group(
        Personal: this.fb.group(
            FIRST_NAME: 
                value: this.FIRST_NAME,
                disabled: true
            ,
            LAST_NAME: this.LAST_NAME,
        )
    )

然后，如果您想禁用/启用。使用以下方法：

this.myForm.get('Personal.FIRST_NAME').disable();
this.myForm.get('Personal.FIRST_NAME').enable();

【参考方案3】：

如果你想禁用组，你需要告诉this.Personal是什么，现在你只是将它声明为一个FormGroup，没有别的。

所以您可以在构建表单之后执行此操作：

    this.Personal = this.myForm.get('Personal')

然后你可以禁用它：

    this.Personal.disable();

演示：http://plnkr.co/edit/QAhY6A9950jqrgzvjVKu?p=preview

【讨论】：

有没有办法默认初始化字段组？

禁用或启用

按照我的看法，如果您想最初禁用它，您可以在构建表单后执行此操作。 plnkr.co/edit/h5ijJUl6qXJsYECgR0a3?p=preview

@AnkitRaonka 据我所知，在初始化时执行此操作（禁用表单组）的唯一方法是将该表单组中的所有字段初始化为禁用 someNestedGroup: new formBuilder( email: [ value: null, disabled: true , [Validators.required, Validators.email]], ctrl2: value: null, disabled: true ) 当表单group 的所有控件都被禁用，然后 FormGroup 本身被禁用

【参考方案4】：

一个简单的解决方案：

<fieldset [disabled]="!frmCheckout.get('id').value">
    ... All controls inside will apply disabled rules ...
</fieldset>

【讨论】：

这是最好的解决方案。简洁明了，它允许您向字段集中的任何控件/元素添加自定义样式。只需添加 css 查询即可查找所有输入：禁用、文本区域：禁用等。

【参考方案5】：

给定以下形式：

this.myForm = this.fb.group(
  personal: this.fb.group(
    firstName: null,
    lastName: null
  )
);

A)如果您想以编程方式启用/禁用personal 表单组，就像已经接受的答案所说，您可以使用group.disable() / group.enable()。不过，我想提一下 options 参数的重要性：

this.myForm.get('personal').disable( emitEvent: false );
this.myForm.get('personal').enable( emitEvent: false );

当然，选项参数 emitEvent: false 是可选的。有时您可能希望表单发出事件，但有时您不希望。 如果您在 myForm.valueChanges.subscribe() 中进行禁用/启用之间的切换，则需要它，因为有时您需要基于相同形式的其他控件的值/状态来启用/禁用不同的控件/组。没有 emitEvent: false ，会导致死循环。

B) 如果您想在初始化时禁用它，那么您需要初始化它的所有控件以禁用。以下表单组将从一开始就被禁用：

this.myForm = this.fb.group(
  personal: this.fb.group(
    firstName: [  value: null, disabled: true , Validators.required ],
    lastName: [  value: null, disabled: true , Validators.required ],
    email: [  value: null, disabled: true , [ Validators.required, Validators.email ] ],
    birthDate:  value: null, disabled: true 
  )
);

console.log(this.myForm.get('personal').disabled); // This will output "true"

我还添加了验证器作为示例，以防有人想知道：当控件被禁用时，我们不需要担心验证器，验证会被忽略。

【讨论】：

最佳答案这个形状 firstName: [ value: null, disabled: true , Validators.required ] 是我正在寻找的

【参考方案6】：

您可以像这样禁用所有 formControl：

    Object.keys(this.form.controls).forEach(ctrl => 
      this.editForm.controls[ctrl].disable();
    );