René's URL Explorer Experiment


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

direct link

Domain: patch-diff.githubusercontent.com


Hey, it has json ld scripts:
{"@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-controllervoltron_issues_fragments
route-actionissue_layout
fetch-noncev2:32e4555d-d9b5-ac62-d188-f0fb9b703a3f
current-catalog-service-hash81bb79d38c15960b92d99bca9288a9108c7a47b18f2423d0f6438c5b7bcd2114
request-id86F4:340321:3802E54:488BEB5:6974C800
html-safe-noncea38eb024b626ae64660d813cdad6a39e2b3d4d854a8df946ac61b411611c5a8e
visitor-payloadeyJyZWZlcnJlciI6IiIsInJlcXVlc3RfaWQiOiI4NkY0OjM0MDMyMTozODAyRTU0OjQ4OEJFQjU6Njk3NEM4MDAiLCJ2aXNpdG9yX2lkIjoiNDkwODE4OTgxMzMyNTQ4MTk4NCIsInJlZ2lvbl9lZGdlIjoiaWFkIiwicmVnaW9uX3JlbmRlciI6ImlhZCJ9
visitor-hmac1c80c41e54ba7fab8295a83281e83f331334d82210f117302488003a305fa23e
hovercard-subject-tagissue:2317325177
github-keyboard-shortcutsrepository,issues,copilot
google-site-verificationApib7-x98H0j5cPqHWwSMm6dNU4GmODRoqxLiDzdx9I
octolytics-urlhttps://collector.github.com/github/collect
analytics-location///voltron/issues_fragments/issue_layout
fb:app_id1401488693436528
apple-itunes-appapp-id=1477376905, app-argument=https://github.com/_view_fragments/issues/show/angular/angular/56078/issue_layout
twitter:imagehttps://opengraph.githubassets.com/3aea478094f9fd0aadeb5ac29b786eb6581ad6077778bad2e88f1e69402793d7/angular/angular/issues/56078
twitter:cardsummary_large_image
og:imagehttps://opengraph.githubassets.com/3aea478094f9fd0aadeb5ac29b786eb6581ad6077778bad2e88f1e69402793d7/angular/angular/issues/56078
og:image:altWhich @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:width1200
og:image:height600
og:site_nameGitHub
og:typeobject
og:author:usernamejmendes92
hostnamegithub.com
expected-hostnamegithub.com
None4a4bf5f4e28041a9d2e5c107d7d20b78b4294ba261cab243b28167c16a623a1f
turbo-cache-controlno-preview
go-importgithub.com/angular/angular git https://github.com/angular/angular.git
octolytics-dimension-user_id139426
octolytics-dimension-user_loginangular
octolytics-dimension-repository_id24195339
octolytics-dimension-repository_nwoangular/angular
octolytics-dimension-repository_publictrue
octolytics-dimension-repository_is_forkfalse
octolytics-dimension-repository_network_root_id24195339
octolytics-dimension-repository_network_root_nwoangular/angular
turbo-body-classeslogged-out env-production page-responsive
disable-turbofalse
browser-stats-urlhttps://api.github.com/_private/browser/stats
browser-errors-urlhttps://api.github.com/_private/browser/errors
release488b30e96dfd057fbbe44c6665ccbc030b729dde
ui-targetfull
theme-color#1e2327
color-schemelight dark

Links:

Skip to contenthttps://patch-diff.githubusercontent.com/angular/angular/issues/56078#start-of-content
https://patch-diff.githubusercontent.com/
Sign in https://patch-diff.githubusercontent.com/login?return_to=https%3A%2F%2Fgithub.com%2Fangular%2Fangular%2Fissues%2F56078
GitHub CopilotWrite better code with AIhttps://github.com/features/copilot
GitHub SparkBuild and deploy intelligent appshttps://github.com/features/spark
GitHub ModelsManage and compare promptshttps://github.com/features/models
MCP RegistryNewIntegrate external toolshttps://github.com/mcp
ActionsAutomate any workflowhttps://github.com/features/actions
CodespacesInstant dev environmentshttps://github.com/features/codespaces
IssuesPlan and track workhttps://github.com/features/issues
Code ReviewManage code changeshttps://github.com/features/code-review
GitHub Advanced SecurityFind and fix vulnerabilitieshttps://github.com/security/advanced-security
Code securitySecure your code as you buildhttps://github.com/security/advanced-security/code-security
Secret protectionStop leaks before they starthttps://github.com/security/advanced-security/secret-protection
Why GitHubhttps://github.com/why-github
Documentationhttps://docs.github.com
Bloghttps://github.blog
Changeloghttps://github.blog/changelog
Marketplacehttps://github.com/marketplace
View all featureshttps://github.com/features
Enterpriseshttps://github.com/enterprise
Small and medium teamshttps://github.com/team
Startupshttps://github.com/enterprise/startups
Nonprofitshttps://github.com/solutions/industry/nonprofits
App Modernizationhttps://github.com/solutions/use-case/app-modernization
DevSecOpshttps://github.com/solutions/use-case/devsecops
DevOpshttps://github.com/solutions/use-case/devops
CI/CDhttps://github.com/solutions/use-case/ci-cd
View all use caseshttps://github.com/solutions/use-case
Healthcarehttps://github.com/solutions/industry/healthcare
Financial serviceshttps://github.com/solutions/industry/financial-services
Manufacturinghttps://github.com/solutions/industry/manufacturing
Governmenthttps://github.com/solutions/industry/government
View all industrieshttps://github.com/solutions/industry
View all solutionshttps://github.com/solutions
AIhttps://github.com/resources/articles?topic=ai
Software Developmenthttps://github.com/resources/articles?topic=software-development
DevOpshttps://github.com/resources/articles?topic=devops
Securityhttps://github.com/resources/articles?topic=security
View all topicshttps://github.com/resources/articles
Customer storieshttps://github.com/customer-stories
Events & webinarshttps://github.com/resources/events
Ebooks & reportshttps://github.com/resources/whitepapers
Business insightshttps://github.com/solutions/executive-insights
GitHub Skillshttps://skills.github.com
Documentationhttps://docs.github.com
Customer supporthttps://support.github.com
Community forumhttps://github.com/orgs/community/discussions
Trust centerhttps://github.com/trust-center
Partnershttps://github.com/partners
GitHub SponsorsFund open source developershttps://github.com/sponsors
Security Labhttps://securitylab.github.com
Maintainer Communityhttps://maintainers.github.com
Acceleratorhttps://github.com/accelerator
Archive Programhttps://archiveprogram.github.com
Topicshttps://github.com/topics
Trendinghttps://github.com/trending
Collectionshttps://github.com/collections
Enterprise platformAI-powered developer platformhttps://github.com/enterprise
GitHub Advanced SecurityEnterprise-grade security featureshttps://github.com/security/advanced-security
Copilot for BusinessEnterprise-grade AI featureshttps://github.com/features/copilot/copilot-business
Premium SupportEnterprise-grade 24/7 supporthttps://github.com/premium-support
Pricinghttps://github.com/pricing
Search syntax tipshttps://docs.github.com/search-github/github-code-search/understanding-github-code-search-syntax
documentationhttps://docs.github.com/search-github/github-code-search/understanding-github-code-search-syntax
Sign in https://patch-diff.githubusercontent.com/login?return_to=https%3A%2F%2Fgithub.com%2Fangular%2Fangular%2Fissues%2F56078
Sign up https://patch-diff.githubusercontent.com/signup?ref_cta=Sign+up&ref_loc=header+logged+out&ref_page=%2F%3Cuser-name%3E%2F%3Crepo-name%3E%2Fvoltron%2Fissues_fragments%2Fissue_layout&source=header-repo&source_repo=angular%2Fangular
Reloadhttps://patch-diff.githubusercontent.com/angular/angular/issues/56078
Reloadhttps://patch-diff.githubusercontent.com/angular/angular/issues/56078
Reloadhttps://patch-diff.githubusercontent.com/angular/angular/issues/56078
angular https://patch-diff.githubusercontent.com/angular
angularhttps://patch-diff.githubusercontent.com/angular/angular
Notifications https://patch-diff.githubusercontent.com/login?return_to=%2Fangular%2Fangular
Fork 27k https://patch-diff.githubusercontent.com/login?return_to=%2Fangular%2Fangular
Star 99.7k https://patch-diff.githubusercontent.com/login?return_to=%2Fangular%2Fangular
Code https://patch-diff.githubusercontent.com/angular/angular
Issues 1k https://patch-diff.githubusercontent.com/angular/angular/issues
Pull requests 126 https://patch-diff.githubusercontent.com/angular/angular/pulls
Discussions https://patch-diff.githubusercontent.com/angular/angular/discussions
Actions https://patch-diff.githubusercontent.com/angular/angular/actions
Projects 2 https://patch-diff.githubusercontent.com/angular/angular/projects
Security 4 https://patch-diff.githubusercontent.com/angular/angular/security
Insights https://patch-diff.githubusercontent.com/angular/angular/pulse
Code https://patch-diff.githubusercontent.com/angular/angular
Issues https://patch-diff.githubusercontent.com/angular/angular/issues
Pull requests https://patch-diff.githubusercontent.com/angular/angular/pulls
Discussions https://patch-diff.githubusercontent.com/angular/angular/discussions
Actions https://patch-diff.githubusercontent.com/angular/angular/actions
Projects https://patch-diff.githubusercontent.com/angular/angular/projects
Security https://patch-diff.githubusercontent.com/angular/angular/security
Insights https://patch-diff.githubusercontent.com/angular/angular/pulse
New issuehttps://patch-diff.githubusercontent.com/login?return_to=https://github.com/angular/angular/issues/56078
New issuehttps://patch-diff.githubusercontent.com/login?return_to=https://github.com/angular/angular/issues/56078
Input valid/invalid pseudo states classes not updated as expectedhttps://patch-diff.githubusercontent.com/angular/angular/issues/56078#top
area: formshttps://github.com/angular/angular/issues?q=state%3Aopen%20label%3A%22area%3A%20forms%22
forms: ControlValueAccessorhttps://github.com/angular/angular/issues?q=state%3Aopen%20label%3A%22forms%3A%20ControlValueAccessor%22
workaround1: obvioushttps://github.com/angular/angular/issues?q=state%3Aopen%20label%3A%22workaround1%3A%20obvious%22
needsTriagehttps://github.com/angular/angular/milestone/83
https://github.com/jmendes92
https://github.com/jmendes92
jmendes92https://github.com/jmendes92
on May 26, 2024https://github.com/angular/angular/issues/56078#issue-2317325177
https://stackblitz.com/edit/stackblitz-starters-wjqt7b?file=src%2Fmain.tshttps://stackblitz.com/edit/stackblitz-starters-wjqt7b?file=src%2Fmain.ts
area: formshttps://github.com/angular/angular/issues?q=state%3Aopen%20label%3A%22area%3A%20forms%22
forms: ControlValueAccessorhttps://github.com/angular/angular/issues?q=state%3Aopen%20label%3A%22forms%3A%20ControlValueAccessor%22
workaround1: obvioushttps://github.com/angular/angular/issues?q=state%3Aopen%20label%3A%22workaround1%3A%20obvious%22
needsTriageNo due datehttps://github.com/angular/angular/milestone/83
https://github.com
Termshttps://docs.github.com/site-policy/github-terms/github-terms-of-service
Privacyhttps://docs.github.com/site-policy/privacy-policies/github-privacy-statement
Securityhttps://github.com/security
Statushttps://www.githubstatus.com/
Communityhttps://github.community/
Docshttps://docs.github.com/
Contacthttps://support.github.com?tags=dotcom-footer

Viewport: width=device-width


URLs of crawlers that visited me.