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

score 28 · Accepted Answer · edited Nov 14 '19 at 18:07

28

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

edited Nov 14 '19 at 18:07

Collin M. Barrett

2,065
4
24
43

answered Jul 31 '17 at 11:41

AJT82

60,574
21
115
147

is there a way to default initialize a field group? – Ankit Raonka Aug 01 '17 at 04:58
as in disabled or enabled – Ankit Raonka Aug 01 '17 at 05:06
They way I see it, you can just do it after building a form if you want to disable it initially. http://plnkr.co/edit/h5ijJUl6qXJsYECgR0a3?p=preview – AJT82 Aug 01 '17 at 09:46
1

@AnkitRaonka as far as I can see, the only way to do it on initialization (make a form group disabled) is to initialize all the fields in that form group as disabled `someNestedGroup: new formBuilder({ email: [{ value: null, disabled: true }, [Validators.required, Validators.email]], ctrl2: { value: null, disabled: true } })` When a form group has all of it's controls disabled, then the FormGroup itself is disabled – MrCroft Feb 17 '19 at 16:40

score 11 · Answer 2 · edited Nov 14 '19 at 19:34

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.

Best Answer this shape firstName: [ { value: null, disabled: true }, Validators.required ] is what i was looking for — Omar Hasan, Mar 10 '20 at 08:19

score 6 · Answer 3 · edited Nov 14 '19 at 19:47

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

score 5 · Answer 4 · edited Nov 14 '19 at 19:33

5

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

edited Nov 14 '19 at 19:33

Milo

3,002
9
25
40

answered Jul 31 '17 at 10:04

Martin Vich

930
1
5
21

this.Personal.disable(); doesnt work for nested FormGroup bt works for the whole form. – Ankit Raonka Jul 31 '17 at 10:21

score 4 · Answer 5 · answered Jul 31 '18 at 13:50

4

A simple solution:

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

answered Jul 31 '18 at 13:50

Rodolfo Jorge Nemer Nogueira

4,044
2
33
27

This is the best solution. short and clear, and it allows you to add custom styles to any control/element inside the fieldset. just add css query to find all input:disabled, textarea:disabled and etc. – Ester Kaufman Dec 13 '18 at 13:57

score 1 · Answer 6 · answered Dec 30 '20 at 14:53

1

you can disable all formControls like this :

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

answered Dec 30 '20 at 14:53

farokh veician

134
8

How to disable all FormControls inside a FormGroup

6 Answers6