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

forms

Is this a regression?

Yes

Description

When using the Reactive Forms and Validators, I would expect the input valid/invalid pseudo-state classes to be updated accordingly, but this is not the case.

When you check the reproduction link we may notice that the input pseudo state is always valid unless we use the HTML attribute.

Nevertheless, the input ng classes are properly updated. This leads to inputs having the .ng-invalid class but still responding to the :valid pseudo-state class which breaks the styling based on those classes.

Please provide a link to a minimal reproduction of the bug

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

Please provide the exception or error you saw

No exceptions or errors.
This issue can only be noticed visually when styles differ from one state to another.

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

Angular CLI: 17.3.8
Node: 18.20.3
Package Manager: npm 10.2.3
OS: linux x64

Angular: 17.3.10
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1703.8
@angular-devkit/build-angular   17.3.8
@angular-devkit/core            17.3.8
@angular-devkit/schematics      17.3.8
@angular/cli                    17.3.8
@schematics/angular             17.3.8
rxjs                            7.8.1
typescript                      5.3.3
zone.js                         0.14.6

Anything else?

Not sure but I remember it working in a previous version. Also, still present in Angular v18.