Changing from disabled to enabled formControl instance does not enable the underlying input in the DOM

This issue has been tracked since 2022-09-16.

Which @angular/* package(s) are the source of the bug?

forms

Is this a regression?

No

Description

If I replace a disabled form control on an input with an enabled form control, the disabled state is not reflected on the input element in the DOM.

That is if I have an input like this

<input [formControl]="control">

and in the controller some logic like this

doWork(disabled) {
    this.control = new FormControl({
        value: 'foo',
        disabled: disabled
    });
}

and call doWork once with false, the input will stay disabled even when I replace the control with an enabled. You can check out the stackblitz link to try a live demo with a potential workaround.

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/angular-oanfqv

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 14.2.3
Node: 18.7.0 (Unsupported)
Package Manager: npm 8.15.0
OS: win32 x64

Angular: 14.2.2
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1402.3
@angular-devkit/build-angular   14.2.3
@angular-devkit/core            14.2.3
@angular-devkit/schematics      14.2.3
@angular/cli                    14.2.3
@schematics/angular             14.2.3
rxjs                            7.5.6
typescript                      4.7.4

Anything else?

I can work around this issue by calling formControl.enable() to force angular to re-enable the DOM in a setTimeout or after the microtask queue is cleared in the zone

AndrewKushnir wrote this answer on 2022-09-16

@Andreas-Hjortland it looks like this is a duplicate of #35309. I'm closing this ticket, please subscribe to #35309 to receive further updates. Thank you.

More Details About Repo
Owner Name angular
Repo Name angular
Full Name angular/angular
Language TypeScript
Created Date 2014-09-18
Updated Date 2022-09-30
Star Count 84091
Watcher Count 3064
Fork Count 22233
Issue Count 1203

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date