angular - 如何禁用 FormGroup 中的所有 FormControl

Question

我有这个反应性的 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中的所有 FormControl

score 39 · Accepted Answer

如果要禁用该组，则需要说明它是什么this.Personal，现在您刚刚将其声明为 FormGroup，仅此而已。

因此，您可以在构建表单后执行此操作：

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

然后你可以禁用它：

    this.Personal.disable();

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

score 15 · Accepted Answer

给定以下形式：

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 });

当然，options 参数{ emitEvent: false }是可选的。有时您可能希望表单发出事件，但有时您不希望。
如果您在 a 中进行禁用/启用之间的切换，则需要它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"

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

score 8 · Accepted Answer

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

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

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

score 6 · Accepted Answer

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

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();

score 5 · Accepted Answer

一个简单的解决方案：

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

score 3 · Accepted Answer

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

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

angular - 如何禁用 FormGroup 中的所有 FormControl

6 回答 6

Related

Reference