Injected ngControl doesn't contain control property in Angular 9

🐞 bug report

Affected Package

import { NgControl } from '@angular/forms';

Is this a regression?

I believe that this is an Ivy compiler issue

Description

Injected ngControl doesn’t contain control property in Angular 9.

🔬 Minimal Reproduction

<mat-checkbox formControlName="locked" name="locked" class="m-t-5"
[opDisabled]="!(isEditing && isLocked)">
<span>{{ 'User.Locked' | translate }}</span>
</mat-checkbox>

This doesn’t work:

import { Directive, Input } from '@angular/core';
import { NgControl } from '@angular/forms';

@Directive({
  selector: '[opDisabled]'
})
export class DisabledDirective {
  @Input()
  set opDisabled(condition: boolean) {
    const action = condition ? 'disable' : 'enable';
    this.ngControl.control[action]();
  }

  constructor(private ngControl: NgControl) {}
}

This works:

import { Directive, Input } from '@angular/core';
import { NgControl } from '@angular/forms';

@Directive({
  selector: '[opDisabled]'
})
export class DisabledDirective {
  @Input()
  set opDisabled(condition: boolean) {
    const action = condition ? 'disable' : 'enable';
    setTimeout(() => this.ngControl.control[action]());
  }

  constructor(private ngControl: NgControl) {}
}

🔥 Exception or Error

core.js:5828 ERROR TypeError: Cannot read property 'disable' of undefined

The control property is undefined and It looks like the it gets appended asynchronously to the injected ngControl, that’s why the setTimeout(() => {...}) workaround seems to work. Is this by design or is it a bug? There is a similar issue reported #32522, but locked due to inactivity, without any solutions mentioned in the comments.

🌍 Your Environment

Angular Version:

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


Angular CLI: 9.0.1
Node: 13.3.0
OS: darwin x64

Angular: 9.0.0
... animations, cdk, common, compiler, compiler-cli, core, forms
... language-service, material, platform-browser
... platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.1
@angular-devkit/build-angular     0.900.1
@angular-devkit/build-optimizer   0.900.1
@angular-devkit/build-webpack     0.900.1
@angular-devkit/core              9.0.1
@angular-devkit/schematics        9.0.1
@angular/cli                      9.0.1
@angular/flex-layout              9.0.0-beta.29
@ngtools/webpack                  9.0.1
@schematics/angular               9.0.1
@schematics/update                0.900.1
rxjs                              6.5.4
typescript                        3.7.5
webpack                           4.41.2

[ChellappanRajan]

Listen to opDisabled input binding change inside ngOnChanges, In this way you can fix this issue.

@Input() opDisabled;
ngOnChanges(changes) {
   if (changes['opDisabled']) {
     const action = this.opDisabled ? 'disable' : 'enable';
     this.ngControl.control[action]();
   }
 }

For More Information Check this thread: https://twitter.com/yurzui/status/1225050458097704960

[allout58]

So will this issue be fixed, or is the ngOnChanges workaround going to be required for Ivy permanently?