NgForm renders form controls slower than expected

🐞 bug report

Affected Package

The issue is caused by package @angular/forms

Is this a regression?

No

Description

Unable to access controls object of NgForm when Angular starts rendering component

🔬 Minimal Reproduction

If you access the controls object of NgForm like this:

When Angular starts rendering my component, it said that there’s no such properties like i have in my form controls:

I console.log() the controls of NgForm, at first, it has nothing like you guys see an empty object in my console, but then chrome developer tool tells ‘Value below was evaluated just now’. Does that mean when Angular starts rendering my component and access the form controls, the form controls haven’t been there yet?

🔥 Exception or Error

🌍 Your Environment

Angular Version:

Angular CLI: 10.0.6
Node: 12.16.3      
OS: win32 x64      

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

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1000.6
@angular-devkit/build-angular     0.1000.6
@angular-devkit/build-optimizer   0.1000.6
@angular-devkit/build-webpack     0.1000.6
@angular-devkit/core              10.0.6
@angular-devkit/schematics        10.0.6
@angular/cli                      10.0.6
@ngtools/webpack                  10.0.6
@schematics/angular               10.0.6
@schematics/update                0.1000.6
rxjs                              6.5.5
typescript                        3.9.7
webpack                           4.43.0

Anything else relevant?

[jnizet]

As far as I understand it, here’s what happens, chronologically:

• The change detection happens for the app component
• As part of this change detection, the expressions in its template are evaluated. That fails because f.controls doesn’t contain the child controls yet.
• If the previous step didn’t fail, then the change detection would then be triggered for the directives and components used inside the template.
• As part of these change detections, the ngOnChangesmethod of the child ngModel directives would be called, and that’s what would register the child controls into their parent NgForm directive.

[AndrewKushnir]

Hi @anphamv, thanks for reporting this issue. However, you didn’t provide sufficient information for us to understand and reproduce the problem. Please check out our submission guidelines to understand why we can’t act on issues that are lacking important information. Could you please provide a repro using Stackblitz so that we can have a look? Thank you.