Create disabled form group with FormBuilder

shohrukh picture shohrukh · Aug 21, 2018 · Viewed 7.4k times · Source

Let's say we have myFormGroup which is initialized via FormBuilder:

this.myFormGroup = this.fb.group(
  {
    field1: ['', SomeValidator1],
    field2: ['', AnotherValidator2],
    field3: [''],
    ...
  }
);

I'm aware that we can disable particular form control, for instance:

fb.control({value: 'my val', disabled: true});

Of course I can use this syntax in my example and mark as disabled every single control in the group. But the form group might have a lot of controls.

So the question - is there any way to disable entire FormGroup/FormArray while creating (not after) it via FormBuilder?

p.s. The reason I'm asking this question is because I need conditionally initialize form group with active or disabled fields for different kind of user privileges.

Answer

Luis Felipe Diaz Valbuena picture Luis Felipe Diaz Valbuena · Jun 17, 2019

I had same problem, Angular FormBuilder receives, initial state of control, and verify if the param its like to { value: any, disabled: boolean, ..... } if the parameter meets this struct, initialize the control with value and disabled/active.

try:

this.myFormGroup = this.fb.group(
  {
    field1: [{ value: '', disabled: true }, SomeValidator1],
    field2: [{ value:'', disabled: true }, AnotherValidator2],
    field3: [{ value:'', disabled: true}],
    ...
  }
);