Impossible to set the initial value of a input[number] field to the proper amount of decimals

[adamreisnz]

I'm submitting a ...

• bug report
• feature request
• other (Please do not submit support requests here (see above))

Current behavior:
It is impossible to set the initial value of a input[number] field to the proper amount of decimals, for example when one wants to encourage a currency input.

Expected / new behavior:
If a model value is Number(12.5), there should be a way to format this to 12.50 and have this be displayed in the input[number] field, or the input[number] field should accept strings that are valid numbers and display them as their string value (e.g. '12.50').

Minimal reproduction of the problem with instructions:
http://plnkr.co/edit/OROvhJ7A5nZfGT7HQLqJ?p=preview

If you change $scope.someNumber to 12.5 it works, but there is no way to have the input field pre-populate with 12.50.

Manual entry of 12.50 is possible though.

Angular version: 1.6.4

Browser: all

Anything else:
A user can manually input 12.50 in the input[number] field without problems (as it is in fact a valid number), so I think we should be able to put that kind of value into the input field through the model as well.

Currently, this is not possible, because if you run the value through the number filter first for example, it converts into a string and then Angular throws the ngModel:numfmt error.

Ideally, input[number] should in fact accept strings in the model and display them as they are, provided that they are a valid number.

Possibly related:
#11157
#11464

[frederikprijck]

Hi @adamreisnz, am I correct to say you're describing two problems at once here ?

• The input[type=number] which does not accept numerical strings (the plunkr you linked makes use of strings)
• The input[type=number] which drops a decimal when setting it to 12.50 (displayed as 12.5)

For the latter issue, I think this is default behavior of an input[type=number]: https://plnkr.co/edit/kF6VPK6CsEypedDh8EDG?p=preview

So not sure whether or not angularjs is supposed to be changing this behavior ...

[adamreisnz]

Hi @frederikprijck , not really. I don't mind that the input[number] doesn't accept strings, but I would like to have formatting options so that a monetary value of 12.50 can be entered in some way into the input[number].

Basically, the way I see it is that there's two ways to possibly fix this problem:

1. Allow numeric String values so it doesn't throw an error (possibly with a flag), with either Angular validating the String or completely bypassing validation and shifting responsibility to the user.
2. Enable some kind of formatting options, perhaps via an attribute, which allows us to control the formatting of the values (similar to the number filter).

Happy to discuss further to see what options there are.

The main thing that bothers me is that natively, 12.50 is perfectly valid input for an input type=number, yet we are not able to enter this as an initial value using Angular via the model.

[frederikprijck]

The main thing that bothers me is that natively, 12.50 is perfectly valid input for an input type=number, yet we are not able to enter this as an initial value using Angular via the model.

Did you see my plunkr and how we are not being able to do this outside of AngularJS neither? (document.getElementById('input').value = 2.50; also displays as 2.5)
If I'm missing something feel free to update the plunkr.

Not saying the current behavior is something I like, I'm just trying to see how AngularJS handles it differently (or not?) compared to native JavaScript.

Edit:
Aha, it looks like this works as you want: document.getElementById('input').value = '2.50'; with native JavaScript. So basicly the behavior in AngularJS is different mainly coz AngularJS doesn't allow strings, right ?

I'm not sure if there's other, decent, ways to allow this besides from allowing strings for input[type=number] as a decimal 2.50 is acually 2.5 in JavaScript. So I'm not sure if your second option is valid for this ?

Another possibility is to create a formatter for it, which doesn't require changes to the core.

[adamreisnz]

If I'm missing something feel free to update the plunkr.

The only way is to set it as a string (I have updated the Plunkr https://plnkr.co/edit/8XhP9xLhgNgx6RdAz9ZJ?p=preview).

In this case the String 2.50 represents in fact a valid Number, and as such the input accepts it as it's value. If you specify an invalid string, e.g. INVALID, it doesn't allow you to do it.

So you can in fact, do it outside of Angular, by accepting String type values that represent valid numerical values. Angular restricts us needlessly, by only allowing Number type values.

[adamreisnz]

PS: I know that there are probably work arounds imaginable with custom formatters/validators etc. but I feel like this is in fact a bug/omission in Angular and that String values representing numbers should be accepted as valid input, because as you can see in the Plunkr, they are accepted natively as well.

[gkalpak]

Let's move the discussion in #11464, because it is essentially the same issue, it has more context and there is little value in having parallel discussions on the same subject.

[adamreisnz]

OK