question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

input type="number" incompatible with [ngModel] using number pipe

See original GitHub issue

I’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:closed
  • Created 6 years ago
  • Comments:7 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
rfuhrercommented, Feb 6, 2018

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.

1reaction
realappiecommented, Feb 6, 2018

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Angular2 If ngModel is used within a form tag, either the name ...
If ngForm is used, all the input fields which have [(ngModel)]="" must have an attribute name with a value. <input [(ngModel)]="firstname" ...
Read more >
Validating form input - Angular
This page shows how to validate user input from the UI and display useful validation messages, in both reactive and template-driven forms. Prerequisiteslink....
Read more >
Why You Shouldn't Use Angular Pipes With Inputs
The problem is simple: I have a form with an input for the user's phone number. I want to format the phone number...
Read more >
48 answers on StackOverflow to the most popular Angular ...
Can't bind to 'ngModel' since it isn't a known property of 'input' ... +params['id']; // (+) converts string 'id' to a number this.service....
Read more >
Top 18 Most Common AngularJS Developer Mistakes - Toptal
You probably have read that if you were not having a dot in your ng-model, ... Some developers claim that 8 is a...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found