ChangeDetector and NgForm false valid on template using OnPush and NgModel

🐞 bug report

Affected Package

FormsModule

Is this a regression?

no

Description

When using OnPuh startegy, NgForms initially shows a false postive on the Template valid status even if the form is invalid (like when it has a required input). If we subscribe to statusChange on the model we get the invalid state within the stream, but still not in the view.

I’ve opened this issue because I think NgModel should act like @Input and trigger change detection automatically when it has changes. The change detection is triggered when the user interacts with the form through the DOM or the NgModel changes the value, but the ChangeDetector is failing to detect the initial state on the Template using OnPush.

🔬 Minimal Reproduction

https://stackblitz.com/edit/angular-jvwfw3

🌍 Your Environment

Angular Version:

Angular CLI: 9.1.1
Node: 10.16.2
OS: linux x64

Angular: 9.1.1
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router, service-worker
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.0
@angular/flex-layout              9.0.0-beta.29
@angular/material                 9.2.0
@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?

[vinagreti]

@souhailharrati, thank you for your workaround!

Even having ways of working around this issue, it is still an issue. The state of both components are the same at the same time, but OnPush doesn’t reflects the state as it should do.

My workaround was enabling Default mode on that specific component and wait for this issue to be solved.

[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.}