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.

Answer 3

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

Answer 4

A simple solution:

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

Answer 5

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

Answer 6

you can disable all formControls like this :

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

Answer 7

If you want to enable/disable the FormGroup for example for editing data you can use this simple One-Liner:

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