简体   繁体   English

如何禁用 FormGroup 中的所有 FormControl

[英]How to disable all FormControls inside a FormGroup

I have this reactive Angular Form structure:我有这个反应式 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,
        })
    })
}

If I do:如果我做:

this.FIRST_NAME.disable();

it disables the FormControl.它禁用 FormControl。

How to disable all FormControls in Personal FormGroup如何禁用Personal FormGroup 中的所有 FormControl

If you want to disable the group, you need to tell what this.Personal is, now you have just declared it as a FormGroup, nothing else.如果你想禁用该组,你需要告诉this.Personal是什么,现在你只是将它声明为一个 FormGroup,没有别的。

So you can do it after building the form:因此,您可以构建表单执行此操作:

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

Then you can just disable it with:然后你可以禁用它:

    this.Personal.disable();

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

Given the following form:给定以下形式:

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

A) If you want to programmatically enable/disable the personal form group, like the already accepted answer says, you can use group.disable() / group.enable() . A)如果您想以编程方式启用/禁用personal表单组,就像已经接受的答案所说的那样,您可以使用group.disable() / group.enable() However, I'd like to mention the importance of the options argument:但是,我想提一下 options 参数的重要性:

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

The options argument { emitEvent: false } is optional, of course.当然,选项参数{ emitEvent: false }是可选的。 Sometimes you might want the form to emit the event, but sometimes you don't.有时您可能希望表单发出事件,但有时您不想。
It is needed in case you do the toggling between disabled/enabled in a myForm.valueChanges.subscribe() , since sometimes you need to enable/disable different controls/groups based on the value/state of other controls in the very same form.如果您在myForm.valueChanges.subscribe()进行禁用/启用之间的切换,则需要它,因为有时您需要根据同一表单中其他控件的值/状态启用/禁用不同的控件/组。 Without { emitEvent: false } , that will cause an endless loop.没有{ emitEvent: false } ,这将导致无限循环。

B) If you want to make it disabled on initialization, then you need to initialize all of it's controls to be disabled. B)如果要在初始化时禁用它,则需要初始化要禁用的所有控件。 The following form group would be disabled from the start:以下表单组将从一开始就被禁用:

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"

I also added Validators as an example, in case anyone is wondering: we don't need to worry about validators when a control is disabled, the validation is ignored.我还添加了验证器作为示例,以防有人想知道:当控件被禁用时,我们不需要担心验证器,验证将被忽略。

You can either disable whole form this.Personal.disable();您可以禁用整个表单this.Personal.disable();

or you can enumerate all form controls and disable/enable them one by one或者您可以枚举所有表单控件并一一禁用/启用它们

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

You can disable control like that.您可以像这样禁用控制。 So your form builder should be like:所以你的表单构建器应该是这样的:

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

And then if you want to disable/enable.然后如果你想禁用/启用。 Use the following method:使用以下方法:

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

A simple solution:一个简单的解决方案:

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

you can disable all formControls like this :您可以像这样禁用所有 formControl:

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

If you want to enable/disable the FormGroup for example for editing data you can use this simple One-Liner:例如,如果您想启用/禁用 FormGroup 以编辑数据,您可以使用这个简单的 One-Liner:

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM