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