input type="number" incompatible with [ngModel] using number pipe
See original GitHub issueI’m submitting a…
[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
Current behavior
an input with the type set to “number” seems to convert the value to a string before trying to run the ngModel statement. This can cause issues with using Pipes such as number where it’s expecting the input to be a number and not a string.
Expected behavior
It should process the NgModel statement before trying to convert the input to match whatever type it’s been assigned. You can work around this by not using the input type.
Minimal reproduction of the problem with instructions
num = 1234.33333;
<input type="number" [ngModel]="num | number:'1.0-2'"> <!-- Broken as 1,234.33333 is not a number (comma not expected) -->
<input [ngModel]="num | number:'1.0-2'"> <!-- Works -->
http://plnkr.co/edit/nc0ggvps9VnBJwy7yhk5?p=preview
What is the motivation / use case for changing the behavior?
I had a form where there’s a calculated value that I wanted to look like it fit in the form, so I used a readonly input (with material framework for styling, but that shouldn’t effect this), but I wanted this number formatted to 2 decimal places. I found that it stopped working if a number greater than 999 was put in the input.
Environment
Angular version: 5.2.3
Browser:
- [x] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
For Tooling issues:
- Node version: 8.4.0
- Platform: Windows 10
Others:
Issue Analytics
- State:
- Created 6 years ago
- Comments:7 (2 by maintainers)
Looks like you guys are right. I thought the pipe was blowing up because the value was being converted before being passed to the pipe, but it’s actually the other way around. The pipe is passing the number to the input with a comma in it and then
platform-browser.js
catches that and spits out the error I was seeing.HTML5 doesn’t know the number data type, this has nothing to do with angular. If you have an input of type
number
and you try to read out the value. It will be returned as a string rather than a number.See this codepen demo. This stackoverflow post has also some nice information about this