Title: Input valid/invalid pseudo states classes not updated as expected · Issue #56078 · angular/angular · GitHub
Open Graph Title: Input valid/invalid pseudo states classes not updated as expected · Issue #56078 · angular/angular
X Title: Input valid/invalid pseudo states classes not updated as expected · Issue #56078 · angular/angular
Description: 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 t...
Open Graph Description: 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 ...
X Description: 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 ...
Opengraph URL: https://github.com/angular/angular/issues/56078
X: @github
Domain: patch-diff.githubusercontent.com
{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"Input valid/invalid pseudo states classes not updated as expected","articleBody":"### Which @angular/* package(s) are the source of the bug?\n\nforms\n\n### Is this a regression?\n\nYes\n\n### Description\n\nWhen 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.\r\n\r\nWhen you check the reproduction link we may notice that the input pseudo state is always valid unless we use the HTML attribute.\r\n\r\nNevertheless, 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.\n\n### Please provide a link to a minimal reproduction of the bug\n\nhttps://stackblitz.com/edit/stackblitz-starters-wjqt7b?file=src%2Fmain.ts\n\n### Please provide the exception or error you saw\n\n```true\nNo exceptions or errors.\r\nThis issue can only be noticed visually when styles differ from one state to another.\n```\n\n\n### Please provide the environment you discovered this bug in (run `ng version`)\n\n```true\nAngular CLI: 17.3.8\r\nNode: 18.20.3\r\nPackage Manager: npm 10.2.3\r\nOS: linux x64\r\n\r\nAngular: 17.3.10\r\n... animations, common, compiler, compiler-cli, core, forms\r\n... platform-browser, router\r\n\r\nPackage Version\r\n---------------------------------------------------------\r\n@angular-devkit/architect 0.1703.8\r\n@angular-devkit/build-angular 17.3.8\r\n@angular-devkit/core 17.3.8\r\n@angular-devkit/schematics 17.3.8\r\n@angular/cli 17.3.8\r\n@schematics/angular 17.3.8\r\nrxjs 7.8.1\r\ntypescript 5.3.3\r\nzone.js 0.14.6\n```\n\n\n### Anything else?\n\nNot sure but I remember it working in a previous version. Also, still present in Angular v18.","author":{"url":"https://github.com/jmendes92","@type":"Person","name":"jmendes92"},"datePublished":"2024-05-26T00:07:19.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":0},"url":"https://github.com/56078/angular/issues/56078"}
| route-pattern | /_view_fragments/issues/show/:user_id/:repository/:id/issue_layout(.:format) |
| route-controller | voltron_issues_fragments |
| route-action | issue_layout |
| fetch-nonce | v2:32e4555d-d9b5-ac62-d188-f0fb9b703a3f |
| current-catalog-service-hash | 81bb79d38c15960b92d99bca9288a9108c7a47b18f2423d0f6438c5b7bcd2114 |
| request-id | 86F4:340321:3802E54:488BEB5:6974C800 |
| html-safe-nonce | a38eb024b626ae64660d813cdad6a39e2b3d4d854a8df946ac61b411611c5a8e |
| visitor-payload | eyJyZWZlcnJlciI6IiIsInJlcXVlc3RfaWQiOiI4NkY0OjM0MDMyMTozODAyRTU0OjQ4OEJFQjU6Njk3NEM4MDAiLCJ2aXNpdG9yX2lkIjoiNDkwODE4OTgxMzMyNTQ4MTk4NCIsInJlZ2lvbl9lZGdlIjoiaWFkIiwicmVnaW9uX3JlbmRlciI6ImlhZCJ9 |
| visitor-hmac | 1c80c41e54ba7fab8295a83281e83f331334d82210f117302488003a305fa23e |
| hovercard-subject-tag | issue:2317325177 |
| github-keyboard-shortcuts | repository,issues,copilot |
| google-site-verification | Apib7-x98H0j5cPqHWwSMm6dNU4GmODRoqxLiDzdx9I |
| octolytics-url | https://collector.github.com/github/collect |
| analytics-location | / |
| fb:app_id | 1401488693436528 |
| apple-itunes-app | app-id=1477376905, app-argument=https://github.com/_view_fragments/issues/show/angular/angular/56078/issue_layout |
| twitter:image | https://opengraph.githubassets.com/3aea478094f9fd0aadeb5ac29b786eb6581ad6077778bad2e88f1e69402793d7/angular/angular/issues/56078 |
| twitter:card | summary_large_image |
| og:image | https://opengraph.githubassets.com/3aea478094f9fd0aadeb5ac29b786eb6581ad6077778bad2e88f1e69402793d7/angular/angular/issues/56078 |
| og:image:alt | 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 ... |
| og:image:width | 1200 |
| og:image:height | 600 |
| og:site_name | GitHub |
| og:type | object |
| og:author:username | jmendes92 |
| hostname | github.com |
| expected-hostname | github.com |
| None | 4a4bf5f4e28041a9d2e5c107d7d20b78b4294ba261cab243b28167c16a623a1f |
| turbo-cache-control | no-preview |
| go-import | github.com/angular/angular git https://github.com/angular/angular.git |
| octolytics-dimension-user_id | 139426 |
| octolytics-dimension-user_login | angular |
| octolytics-dimension-repository_id | 24195339 |
| octolytics-dimension-repository_nwo | angular/angular |
| octolytics-dimension-repository_public | true |
| octolytics-dimension-repository_is_fork | false |
| octolytics-dimension-repository_network_root_id | 24195339 |
| octolytics-dimension-repository_network_root_nwo | angular/angular |
| turbo-body-classes | logged-out env-production page-responsive |
| disable-turbo | false |
| browser-stats-url | https://api.github.com/_private/browser/stats |
| browser-errors-url | https://api.github.com/_private/browser/errors |
| release | 488b30e96dfd057fbbe44c6665ccbc030b729dde |
| ui-target | full |
| theme-color | #1e2327 |
| color-scheme | light dark |
Links:
Viewport: width=device-width