How to disable all FormControls inside a FormGroup

Question

I have this reactive Angular Form structure:

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.

How to disable all FormControls in Personal FormGroup

Answer 1

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

Answer 2

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.