Angular Reactive Forms - Enabled/Disabled Form Control not correctly reflected on UI after FormGroup is Re-initialized

Question

I have a test angular reactive form, where you can enable/disable a Form Control, and apply required/optional validation.

I am running into an issue where the FormControl enabled/disabled state is not correctly reflected in the UI when re-initializing the reactive form.

Example Setup:

first_name: AbstractControl;

constructor(private fb: FormBuilder, private cdr: ChangeDetectorRef) {
    this.buildForm();
}

buildForm(): void {
    this.form = this.fb.group({
      first_name: new FormControl({ value: null, disabled: false }, [
        Validators.maxLength(10),
      ]),
    });

    this.first_name = this.form.controls.first_name;
}

By default, the control is enabled, so I have a method to disable the control

disable(): void {
    this.first_name.disable();
}

I want to be able to reset this form group back to the original state, so I call "buildForm()" and "updateValueAndValidity()" to re-initialize the form.

rebuild() {
    this.buildForm();
    this.form.updateValueAndValidity();
}

• This resets the value, validators, and enabled/disabled state of each form control.
• Everything appears to be correctly reset in the form, however, the enabled/disabled state is NOT correctly reflected on the UI
• As a result, the input is still disabled in the UI, even though the control is correctly reset back to enabled.

I have found a workaround, shown below, although having to call:

• Call form.reset(), and set the disabled state back to the original value BEFORE re-initializing the form. This seems like it should not be required.

reset() {
    this.form.reset({
      first_name: { value: '', disabled: false },
    });
}

rebuild() {
    this.reset();
    this.buildForm();
    this.form.updateValueAndValidity();
}

I would use form.reset() alone, however, it does not allow the original validators to be re-applied, so I would have to call control.setValidators for each control. I would like to have a single piece of logic for initializing and re-initializing the form.

Stackblitz link

To reproduce:

• The Input field is enabled by default
• Click "Disable", and the input is now disabled
• Click "Rebuild Form". The input remains disabled, even though the form control itself is not disabled

So, my question is,

• Is there a way to ensure the input field correctly reflects a controls enabled/disabled state when the form is re-initialized without needing to call form.reset()?

Answer 1

Running into the same issue, I had to use ngAfterContentChecked() and run through my subscriptions again. I would like to find the cause to get a real fix.

Answer 2

This issue was fixed since Angular v.15: https://github.com/angular/angular/issues/48561 To call setDisabledState on form control every time you should import ReactiveFormsModule with parameter:

ReactiveFormsModule.withConfig({ callSetDisabledState: 'always' })