如何禁用 FormGroup 中的所有 FormControl

Question

我有这个反应式 Angular 表单结构：

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。

如何禁用 Personal FormGroup

中的所有 FormControl

Answer 1

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

或者您可以枚举所有表单控件并disable/enable一一枚举它们

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

Answer 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,
        })
    })
}

然后如果你想disable/enable。使用以下方法：

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

Answer 3

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

因此您可以在构建表单后完成：

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

然后你可以禁用它：

    this.Personal.disable();

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

Answer 4

一个简单的解决方案：

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

Answer 5

给定以下形式：

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

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

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

选项参数 { emitEvent: false } 当然是可选的。有时您可能希望表单发出事件，但有时您不需要。
如果您在 myForm.valueChanges.subscribe() 中的 disabled/enabled 之间进行切换，则需要它，因为有时您需要根据其他控件的 value/state enable/disable 不同的 controls/groups以完全相同的形式。如果没有 { 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"

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

Answer 6

您可以像这样禁用所有 formControls :

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

Answer 7

如果您想 enable/disable FormGroup 来编辑数据，您可以使用这个简单的 One-Liner:

this.Personal.disabled ? this.Personal.enable() : this.Personal.disable();

如何禁用 FormGroup 中的所有 FormControl

How to disable all FormControls inside a FormGroup

angular

angular-reactive-forms

formgroups