Certain angular reactive form elements won't react to formcontrol disabled state changes

Question

I have the following issue:

I have an Angular FormGroup defined in one of my angular components, which has several FormControl-s in it, displayed using Angular Material. Every a certain input value changes, I reset this form, creating a new instance of FormGroup, and assign it to the same variable, in the following manner:

this.sampleForm = this.formBuilder.group({
            'samplePropertyName': new FormControl(
                { value: this.dataVo.samplePropertyName, disabled: !this.isEditable() },
 [...]
        },
            { updateOn: 'blur' }
        );

This is working very well, in parts. The visible fields all get updated with their proper new value. However, this is not the case with the disabled state. Every field that is not a base input field, but a unique field type from Angular Material, such as mat-select or mat-datepicker, fails to properly update its disabled state.

I have tried enabling and disabling the formGroup itself, without success. Neither did calling changeDetectorRef work. Is the only solution to not assign a new form instance, but rather, update the existing formcontrols one by one? I really hope this is not the case, as this form has a fair number of fields.

Have you tried manually calling disable() and enable() methods on each formControl, instead of setting it in the FormControl constructor ? This way components should catch the event... If it doesn't work, try to call them inside a setTimeout(() => xxx, 0) to make it async ? — Random
I have tried it with disable and enable on their own, it didn't work. However, it worked with setTimeout. However, due to the large number of fields, this is not an ideal solution, and also because I am baffled why does it work this way, but not through the intended way. — Akos Balazs
Can you consider, making all the to-be-disabled fields into a formgroup and pass it as a formArray and disable the whole the formGroup at once. Something like: this.mainFormGroup.get('newFormArrayControl').disable(); — Srikar Phani Kumar Marti

Akos Balazs Akos Balazs · Accepted Answer · 2021-05-05T14:56:37

I have gone with a slight tweak to Random's suggestion above, I have enabled and disabled the form itself in a 0 second long timeout. It worked this way, and none of the child components called from the view have thrown an error.

I'll use this as a temporary solution, as I am not sure why is it working as an asynch call.

Certain angular reactive form elements won't react to formcontrol disabled state changes

1 Answers