Angular matInput renders incorrectly in forms. Seems to be broken?

[grantcurell]

🐞 bug report

Affected Package

ReactiveFormsModule

Description

See this StackOverflow post.

Edit: Another person found the same problem here and here

Edit: Seems to be related to: angular/components#15274 and #16670

The guy in the attached post is having exactly the same problem I'm having. None of the components render until you click around on the form. If you click everything they render, but not before clicking each element individually.

Removing matInput from my code fixes the problem, but this breaks everything reliant on it.

Before Clicking

After Clicking

Duplication of Problem

See: https://stackblitz.com/edit/dynamic-form-ngfor?file=src%2Fapp%2Fapp.component.html

🌍 Your Environment

Angular Version:

ng --version

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


Angular CLI: 9.1.1
Node: 13.13.0
OS: linux x64

Angular: 9.1.2
... 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.1
@angular-devkit/build-angular     0.901.1
@angular-devkit/build-optimizer   0.901.1
@angular-devkit/build-webpack     0.901.1
@angular-devkit/core              9.1.1
@angular-devkit/schematics        9.1.1
@angular/cdk                      9.2.1
@angular/cli                      9.1.1
@angular/material                 9.2.1
@ngtools/webpack                  9.1.1
@schematics/angular               9.1.1
@schematics/update                0.901.1
rxjs                              6.5.5
typescript                        3.8.3
webpack                           4.42.0

Anything else relevant?
Tested in Firefox and Chrome

[AndrewKushnir]

Hi @grantcurell,

Thanks for providing a repro. I looked at the Stackblitz page and noticed JS error being throw by Forms module:

Error: formGroup expects a FormGroup instance. Please pass one in.

Example:

<div [formGroup]="myGroup">
<input formControlName="firstName">
</div>

In your class:

this.myGroup = new FormGroup({
firstName: new FormControl()
});

This error prevents form controls from initial rendering. It looks like the [formGroup] bindings that you have in a template use value of a type different from FormGroup (undefined in one case and plain object in the second case). I've created an updated version of your repro here and invoked a function to create an instance of the FormGroup before passing it to the [formGroup] binding. The error was resolved and I can see inputs rendered correctly.

Since there are no action items for framework, I'm going to close this ticket. Feel free to reopen if the problem still exists.

Thank you.

[grantcurell]

@AndrewKushnir man I can't thank you enough. I saw that error, but because I knew the data was present I went down the wrong path of trying to understand the behavior instead of just clearing the error. I was like - well, all of it is there, I just have to click around to get it to show up. I should have cleared the error first.

This is pure curiosity on my part - why would clicking around cause the rest to render?

Edit: Also sorry I wasted your time with a swing and miss thinking something was wrong outside my own ineptitude 😂

[AndrewKushnir]

@grantcurell, no problem, glad to know that the solution worked.

This is pure curiosity on my part - why would clicking around cause the rest to render?

I didn't dig deeper to identify why clicking on inputs caused styles and content to appear, but my guess is that clicking caused a new change detection cycle for these components, thus applying updates to these components.

[angular-automatic-lock-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.}