Skip to content

feat(forms): support binding number|null to <input type="text">#67268

Merged
leonsenft merged 1 commit intoangular:mainfrom
alxhub:sf/number-in-text
Mar 19, 2026
Merged

feat(forms): support binding number|null to <input type="text">#67268
leonsenft merged 1 commit intoangular:mainfrom
alxhub:sf/number-in-text

Conversation

@alxhub
Copy link
Copy Markdown
Member

@alxhub alxhub commented Feb 25, 2026

<input type="number"> often does not provide the desired user experience when editing numbers in a form. MDN even describes how text inputs should be used in many cases instead, via <input type="text" inputmode="numeric"> or similar configurations. Previously, this did not work with Signal Forms without a custom input component/directive.

This PR builds support for binding number|null models directly to <input type="text"> native controls via [formField]. When a model has a number or null value, signal forms will preserve that status when the user makes edits/changes. Empty string values are converted to null, other values are parsed as numbers, and a parse error is raised when a non-numeric value is entered.

Note that it's up to the UI developer to configure additional UI affordances such as setting an appropriate inputmode, rejecting non-numeric keypresses, etc.

Fixes #66903
Fixes #66157

@alxhub alxhub requested a review from crisbeto February 25, 2026 02:24
@angular-robot angular-robot bot added detected: feature PR contains a feature commit area: forms labels Feb 25, 2026
@ngbot ngbot bot added this to the Backlog milestone Feb 25, 2026
Copy link
Copy Markdown
Contributor

@kirjs kirjs left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

reviewed-for: public-api

@alxhub alxhub force-pushed the sf/number-in-text branch 4 times, most recently from 826c5cd to 594a3c6 Compare March 17, 2026 18:32
`<input type="number">` often does not provide the desired user experience when editing numbers in
a form. MDN even [describes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/number#using_number_inputs)
how text inputs should be used in many cases instead, via `<input type="text" inputmode="numeric">`
or similar configurations. Previously, this did not work with Signal Forms without a custom input
component/directive.

This PR builds support for binding `number|null` models directly to `<input type="text">` native
controls via `[formField]`. When a model has a number or `null` value, signal forms will preserve
that status when the user makes edits/changes. Empty string values are converted to `null`, other
values are parsed as numbers, and a parse error is raised when a non-numeric value is entered.

Note that it's up to the UI developer to configure additional UI affordances such as setting an
appropriate `inputmode`, rejecting non-numeric keypresses, etc.

Fixes angular#66903
Fixes angular#66157
@alxhub alxhub force-pushed the sf/number-in-text branch from 594a3c6 to 16573cd Compare March 17, 2026 18:33
@alxhub alxhub added target: major This PR is targeted for the next major release 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 17, 2026
@alxhub
Copy link
Copy Markdown
Member Author

alxhub commented Mar 19, 2026

Caretaker: Presubmit is "green"

@alxhub alxhub removed the request for review from crisbeto March 19, 2026 21:01
@leonsenft leonsenft merged commit 41b1410 into angular:main Mar 19, 2026
23 of 25 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 detected: feature PR contains a feature commit 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.

Signal Forms allow diferent numeric input methods Signal forms, number input with inputMode="decimal" fails with localized decimal separator

3 participants