How to disable all FormControls inside a FormGroup
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()
. However, I'd like to mention the importance of the options argument:
this.myForm.get('personal').disable({ emitEvent: false });
this.myForm.get('personal').enable({ emitEvent: false });
The options argument { emitEvent: false }
is optional, of course. 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. Without { emitEvent: false }
, that will cause an endless loop.
B) If you want to make it disabled on initialization, then you need to initialize all of it's controls to be disabled. 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.
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.
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
You can either disable whole form
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();
}