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

forms

Is this a regression?

No

Description

Hello,

Seems like a fairly common case but haven't been able to find a similar post.
(except for the following link but no docu link or explanation: https://stackoverflow.com/questions/42465003/async-validators-causing-expression-has-changed-error)
If it exists, kindly point me to it. Thanks.

I have an async validator for a FormGroup that returns an sync Observable in some cases and async on another.
In same FormGroup, there are controls inside *ngIf that will show up depending on another control's value inside the same FromGroup.
When a control shows up because of a change in another control's value and async validator for FormGroup returns a sync Observable, the error shows up

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/angular-bd4p4z?file=src%2Fmain.ts

Please provide the exception or error you saw

ExpressionChangedAfterItHasBeenCheckedError

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

Also exists on v16 it seems as it happens on the stackblitz reproduction

Angular CLI: 14.2.10
Node: 16.18.1
Package Manager: npm 8.19.2 
OS: darwin x64

Angular: 14.2.12
... animations, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, platform-server, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1402.10
@angular-devkit/build-angular   14.2.10
@angular-devkit/core            14.2.10
@angular-devkit/schematics      14.2.10
@angular/cdk                    14.2.7
@angular/cli                    14.2.10
@schematics/angular             14.2.10
rxjs                            7.5.7
typescript                      4.6.4

Anything else?

No response