Changing a [formControl] reference from a disabled control to an enabled control leaves the HTML control disabled

Bug Report

Affected Package

The issue is caused by package @angular/forms

Is this a regression?

Unsure - happens in at least the last few versions

Description

Say I have an element <input [formControl]="selectedControl" />, when selectedControl is changed in the component TS from a disabled control to an enabled control, the rendered HTML input element remains disabled.

Minimal Reproduction

https://stackblitz.com/edit/angular-form-reference-disabled-bug?file=src/app/app.component.ts

• Click “Select Control 2” - the HTML input will correctly be updated with the value 2, and the disabled state.
• Click “Select Control 1” - the HTML input will correctly be updated with the value 1, but it will incorrectly remain disabled.

Your Environment

Angular Version:

The stackblitz is on 11.0.8. This was repro-ed locally on an app using:

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 11.0.7
Node: 14.15.1
OS: win32 x64

Angular: 11.2.8
... animations, cdk, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router
Ivy Workspace: <error>

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1100.7
@angular-devkit/build-angular   0.1102.8
@angular-devkit/core            11.2.7
@angular-devkit/schematics      11.2.7
@angular/cli                    11.0.7
@angular/flex-layout            11.0.0-beta.33
@schematics/angular             11.2.7
@schematics/update              0.1100.7
rxjs                            6.6.3
typescript                      4.0.7

[jgbpercy]

Right, #41881 looks like my issue, but I don’t accept that #41881 is actually a duplicate #22556 . At least, nothing in either issue suggest this is the case. I found #22556 when searching before raising my issue, read the thread, and decided #22556 was not a duplicate.

I’m fairly certain the solution to my issue lies in FormControlDirective#ngOnChanges. Afaict #22556 is about the handling of FormControl#disable calls. I could well be wrong but these seem unlikely to be related?

Notably, also, in #22556 a lot of people are talking about their controls not disabling when they should. That isn’t the case here. With my issue, controls disable when they should, only the behaviour when enabling is wrong (or, more accurately, when changing the reference from a disabled control to an enabled control).

[destus90]

I believe the root cause is the same as in the referenced issue. You can see https://github.com/angular/angular/issues/41881 or others where the commands are similar to what you are doing.