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

🐞 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’.

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

🔬 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             <error>
@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

[JoostK]

@samvloeberghs I think you meant to address me (although I do know @joost-de-vries and we live in the same city, I don’t think he’ll respond :p)

The issue as reported here is about template type checking errors that occur in combination with Forms APIs, particularly accessing the property controlLabel from a supposed FormControl. This supposedly did not report an error in earlier versions of Angular, however it has always detected this particular kind of unsafe access provided that AOT compilation is used (template type checking is only done in AOT). So from the compiler’s perspective, there is no bug with the template type checking capability.

The examples you bring up are similar, but the scenario is a bit different given that strictTemplates is enabled. This enables more accurate type checking and as you’ve found out, the Forms API doesn’t really play nicely under these circumstances. The return type of the index signature is AbstractControl, so your knowledge of it actually being a concrete FormControl is not reflected in the Forms’s APIs type design, so the template type checker doesn’t have this knowledge. There’s issues like #36405, #17000, #13721 that request APIs to address this limitation in one way or another.

So although the examples you show are showing errors that may be considered undesirable (I fully agree with you here), they are the result of limitations in the Forms APIs, not limitations or bugs in the type checking machinery. This is why I revoked the confirmed label, as this is not actionable from the compiler’s perspective.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}