Skip to content

fix(forms): clear native date inputs correctly in signal forms when changed via native UI#67416

Merged
leonsenft merged 1 commit intoangular:mainfrom
alxhub:sf/input-validity
Mar 20, 2026
Merged

fix(forms): clear native date inputs correctly in signal forms when changed via native UI#67416
leonsenft merged 1 commit intoangular:mainfrom
alxhub:sf/input-validity

Conversation

@alxhub
Copy link
Copy Markdown
Member

@alxhub alxhub commented Mar 3, 2026

When a native date input gets cleared manually by a user via the internal browser UI, the element changes from invalid to valid, but no input event is emitted.

This commit introduces InputValidityMonitor, an injectable service that intercepts these edge-case native status changes. The monitor dynamically installs CSP-compliant styles appending a specific --ng-validity CSS variable to :valid and :invalid pseudoclasses on native form controls as a property transition. By attaching a transitionstart listener, Angular intercepts these changes immediately and re-invokes the parser.

Fixes #67300

@ngbot ngbot bot added this to the Backlog milestone Mar 3, 2026
@alxhub alxhub force-pushed the sf/input-validity branch 2 times, most recently from fb2e95f to 247dc46 Compare March 3, 2026 21:53
@alxhub alxhub force-pushed the sf/input-validity branch 3 times, most recently from b6171df to 6e771ce Compare March 5, 2026 01:17
@alxhub alxhub added the target: major This PR is targeted for the next major release label Mar 16, 2026
…hanged via native UI

When a native date input gets cleared manually by a user via the internal browser
UI, the element changes from invalid to valid, but no `input` event is emitted.

This commit introduces `InputValidityMonitor`, an injectable service that
intercepts these edge-case native status changes. The monitor dynamically
installs CSP-compliant styles appending specific animation keyframes for
`:valid` and `:invalid` pseudoclasses on native form controls. By attaching an
`animationstart` listener, Angular intercepts these changes immediately and
re-invokes the parser.

Fixes angular#67300
@alxhub alxhub force-pushed the sf/input-validity branch from 6e771ce to bfbd510 Compare March 17, 2026 23:13
@alxhub alxhub added action: merge The PR is ready for merge by the caretaker merge: caretaker note Alert the caretaker performing the merge to check the PR for an out of normal action needed or note labels Mar 20, 2026
@leonsenft leonsenft merged commit df8b020 into angular:main Mar 20, 2026
23 checks passed
@leonsenft
Copy link
Copy Markdown
Contributor

This PR was merged into the repository. The changes were merged into the following branches:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

action: merge The PR is ready for merge by the caretaker area: forms merge: caretaker note Alert the caretaker performing the merge to check the PR for an out of normal action needed or note target: major This PR is targeted for the next major release

Projects

None yet

Development

Successfully merging this pull request may close these issues.

regression: signal forms: input of type date isn't required anymore when cleared

5 participants