ExpressionChangedAfterItHasBeenCheckedError when *ngIf and asyncValidator use the same observable

This issue has been created since 2022-09-21.

Which @angular/* package(s) are the source of the bug?

zone.js

Is this a regression?

No

Description

<ng-container *ngIf="observable|async">
    <input formControlName="name">
  </ng-container>

When nameFormControl has an asyncValidator that depends on observable
The console prints out the following error:
ERROR
Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'. Find more at https://angular.io/errors/NG0100

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/angular-ivy-z9hej4?file=src/app/app.component.html

Please provide the exception or error you saw

ERROR
Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'. Find more at https://angular.io/errors/NG0100

Please provide the environment you discovered this bug in (run ng version)

See stackblitz
https://stackblitz.com/edit/angular-ivy-z9hej4?file=src/app/app.component.html

Anything else?

No response

JimmyRowland wrote this answer on 2022-09-24

Edit: console error disappears by using shareReplay({refCount: true}) but nested *ngIf still can't update properly without empty manual subscription in the component.

https://stackblitz.com/edit/angular-2ukcqu

ShareReplay solved my issue.
https://stackblitz.com/edit/angular-ivy-bnxukb?file=src/app/app.component.ts

The bug might be related to this:
https://stackoverflow.com/questions/51974367/async-pipe-subscription-not-work-correctly-when-nested-inside-ngif

alexkunin wrote this answer on 2022-09-25

Looks like the following happens when the timer "ticks":

  1. The input element is instantiated due to *ngIf.
  2. The element is attached to form control via FormGroupDirective#addControl which runs FormGroupDirective#updateValueAndValidity.
  3. Synchronous validators are being executed (AbstractControl#_runValidator), and the control becomes valid (status = 'VALID', valid = true, invalid = false)
  4. Asynchronous validators are being executed (AbstractControl#_runAsyncValidator), but right before that the control gains pending state (status = 'PENDING', valid = false, invalid = false).
  5. Asynchronous validators confirm the control is valid, and now we're back to state in p.3 above: status = 'VALID', valid = true, invalid = false.

So, status change happens twice within same digest cycle, which causes valid to change from true to false then to true again, and that's exactly what ExpressionChangedAfterItHasBeenCheckedError is about.

Commenting out template line with formGroup.valid check makes error message go away.

As a workaround, doing something like form.statusChanges.pipe(delay(1), map(v => v === 'VALID')) instead of form.valid should help.

More Details About Repo
Owner Name angular
Repo Name angular
Full Name angular/angular
Language TypeScript
Created Date 2014-09-18
Updated Date 2022-10-04
Star Count 84139
Watcher Count 3064
Fork Count 22243
Issue Count 1206

YOU MAY BE INTERESTED

Issue Title Created Date Comment Count Updated Date
Feature request - Return Quarto version 4 2022-05-11 2022-09-17
Stop identifying group repositories as a single String 5 2019-04-02 2022-07-07
非常棒的工具!如果能劫持浏览器的点击下载就更完美了! 8 2022-03-14 2022-07-05
关闭到托盘时创建任务窗口关闭后界面进程崩溃 14 2022-03-13 2022-07-04
[iOS 15.5] App crash when enter background 0 2022-09-16 2022-09-16
[Native] Cant use same data for hotupdate android/iOS 0 2022-09-16 2022-09-16
Again Tuya devices are not updated in Home Assisant. 42 2022-01-28 2022-09-06
Test Case JavaDoc Issues w/ Java 11+ 1 2021-12-29 2022-07-25
Share server secret with replicas 12 2019-03-19 2022-09-06
Race conditions in initial package request can lead to wrong result sets 3 2019-03-01 2022-09-03
Feature request: support for integral terms 1 2022-05-05 2022-09-07
Combining ODE and PDE (part 2) 2 2022-04-30 2022-09-07
Solving FPE with boundary condition at t=T rather than t=0 2 2022-05-03 2022-09-07
Devil May Cry HD Collection Fails To Launch Re: DXVK Update 6 2021-12-17 2022-09-07
Duplicated logic for getting available fields in query results 0 2022-08-25 2022-09-02
Become not supported after updating Tap, Tap 3 2022-02-05 2022-09-24
Taptap crashed in my Samsung A72 1 2022-01-29 2022-09-17
egret如何关闭本地服务器? 1 2021-03-22 2022-01-15
> Reverts #119 1 2021-10-25 2021-10-22
Fix broken QT wallet splash screen on Linux 0 2021-12-09 2022-07-22
请求增加爬取微博具体时间的功能 万分感谢!!! 2 2021-02-05 2022-10-03
Extension issue 1 2021-03-06 2022-01-21
Extension server crashes when live sass compiler enabled 5 2021-03-07 2022-09-29
Document says limitation for Guest Token for /users API but the token works 11 2022-06-24 2022-09-23
Cross-project connections drag-n-drop problem 2 2021-12-08 2022-07-24
[server] consider avoiding retry of StartWorkspace 2 2022-07-12 2022-09-14
Is there a way to run chrome in headful mode on apache webserver? 5 2021-07-20 2022-10-04
Getting incompatible key usage error with cosign verify 9 2021-10-01 2022-07-09
Determine dev growth rate goal for Q4 0 2021-10-15 2022-08-27
Lab 0602 Wip policy task 1 step 18 5 2020-07-22 2022-10-01
Cases in with convert has dispatch ambiguity 3 2022-08-03 2022-08-20
Fix error messages for ranges with missing 2 2022-08-03 2022-08-14
docker image zabbix/zabbix-server-mysql:alpine-5.4-latest 1 2021-06-16 2022-09-29
bug: Line channel is not working for outgoing messages 5 2022-02-07 2022-09-21
Street Fighter 2 Cammy Stage graphic bug 5 2022-08-23 2022-09-09
How to skip minification of one file? 0 2022-03-18 2022-10-04
Jetpack App: Auto-dismiss keyboard when the error screen is displayed 2 2022-03-01 2022-07-09
WARNING: Encountered "meta" in payload, but no model was found for model name "metum" 2 2016-06-14 2022-09-02
[BUG]: error when deleting outdated ListingProperty 2 2022-06-14 2022-09-26
[BUG]: Cannot get user shops list 5 2022-06-10 2022-09-26
wrong gofight path 0 2021-12-17 2022-01-16
transfer learning with custom anchors much lower performance at start 1 2022-09-06 2022-09-06
image creation hangs indefinitely 1 2017-09-01 2022-09-18
Cross-language Support? 3 2021-10-21 2022-09-18
Implement soft and hard line breaks in markdown rendering 1 2022-06-06 2022-09-18
Add check for descriptive-style docstring verb (as per Google) 2 2021-01-21 2022-09-26
obscpio without version? 3 2021-01-21 2022-09-20
compile time weaving is not working 4 2014-01-14 2022-08-26
Rework `fetch_login_data()` 0 2021-11-19 2022-09-04