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