Property 'controlLabel' does not exist on type 'AbstractControl'. Due to using Ivy!

[Pieter-1337]

🐞 bug report

Affected Package

The issue is caused by package @angular/....

Not with certainty

Is this a regression?

Yes, the previous version in which this bug was not present was: ....

Yes: In Angular 8 this issue was not present

Description

When building a form with Reactive Forms I decided to use an extension on FormControl to add a property "controlLabel" to my formControls, In Version 8 of Angular this works with no problem, however in Angular 9 when I try to read the extra property on my extended class It, the app will not compile and I will receive an error as followed:

ERROR in apps/reactive-forms/src/app/forms/form-with-state-matcher/form-with-state-matcher.component.html:2:12 - error TS2339: Property 'controlLabel' does not exist on type 'AbstractControl'.

{{form.controls['name'].controlLabel}}

🔬 Minimal Reproduction

https://stackblitz.com/edit/angular-jg9tyw?file=src%2Fapp%2Fapp.component.ts

I Noticed here that turning off the "Use Ivy" flag in the StackBlitz settings tab solves the problem

🔥 Exception or Error

Error in src/app/app.component.html (2:10)
Property 'controlLabel' does not exist on type 'AbstractControl'.

🌍 Your Environment

Angular Version:

Angular CLI: 9.1.0
Node: 10.13.0
OS: win32 x64

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

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.901.0
@angular-devkit/build-angular     0.901.0
@angular-devkit/build-optimizer   0.901.0
@angular-devkit/build-webpack     0.901.0
@angular-devkit/core              9.1.0
@angular-devkit/schematics        9.1.0
@angular/.cdk.MODULES             
@angular/cdk                      9.2.1
@angular/cli                      9.1.0
@angular/material                 9.2.1
@ngtools/webpack                  9.1.0
@schematics/angular               9.1.0
@schematics/update                0.901.0
rxjs                              6.5.5
typescript                        3.8.3
webpack                           4.42.0

[is2ei]

@Pieter-1337

This does not work. But...

<div [formGroup]="form">
  <div>{{form.controls['name'].controlLabel}}</div>
</div>

This works for me.

<div [formGroup]="form">
  <div>{{form.controls.name['controlLabel']}}</div>
</div>

I'm not sure this is regression because this code occurs compiler error even in version 8.

// app.component.ts
console.log(this.form.controls.name.controlLabel); // Compile error!!

In version 9, template type checking feature is available so it just check the type and warns it.

[Pieter-1337]

@is2ei It most definitely works in 8, using it as we speak for another project in the same manner.

Anyhow it I am asking my form control with a specific name for a property on it... if that form control is set as FormControlExtension in my case, it should be able to return all properties of that class, it does not make sense to assume that my object only contains the properties of the base class....

Besised that if you look at the stackblitz I included you would see that it works in version 9, if Ivy is turned of...

[is2ei]

@Pieter-1337

it should be able to return all properties of that class, it does not make sense to assume that my object only contains the properties of the base class....

If you don't want the compiler to check the type, you can use any.
This will work with "enableIvy": true,.

export class AppComponent implements OnInit  {
  form: any;

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.form = this.formBuilder.group({
      name: new FormControlExtension(
        "",
        false,
        [Validators.required],
        "Testing"
      )
    });
  }
}

[Pieter-1337]

I think it should work with ivy just the way it did in older versions, what's the point of using a class if the compiler won't be able to check it's properties ... If i wanted to use "any" I would have used plain JS instead of TS ...

[alxhub]

Confirmed as reported.

This appears to be a template type-checking bug. The error itself is legitimate (it's illegal to access .controlLabel on a value of type AbstractControl), but it was not caught by View Engine in either type-checking mode (basic or fullTemplateTypeCheck). Per our type-checking compatibility story, Ivy should not be surfacing the error unless in strictTemplates mode. This will require some digging to understand more completely.

[JoostK]

This is working properly as far as I can see. I get the exact same error in Angular 8 as I get in Angular 9/10, regardless of whether View Engine or Ivy is used.

I think the difference can be found in the aot flag, that was switched to true when upgrading to Angular 9. In AOT mode the compiler performs these type checks, which it would not in JIT mode. When AOT is enabled, there's currently no flag to fully disable type checking (as would be the case in JIT).

In conclusion, I don't think there is a bug here. This change is documented in the v9 upgrade instructions:

CLI apps compile in AOT mode by default (which includes template type-checking). Users who only built with JIT before may see new type errors. See our template type-checking guide for more information and debugging tips.