AngularJS number input that ignores all keys but numbers

Question

I've been trying to create an input in an AngularJS template and that will only accept whole numbers as input. That is, I don't want it to allow any keys other than 0-9, specifically, I can't stop . from being allowed in the input.

Alexander Puchkov created a directive that achieves this on inputs with type="text" however I want to be able to use type="number" so I can maintain all my other attributes on the field for validation such as min, max, step, etc.

I have an example of this directive not working on a number input here. For example, when type="text" an input of 123. yields a rendering of 123 however when type="number" an input of 123. yeilds 123. since the previous value of 123 is equal when compared numerically.

Ash · Accepted Answer · 2018-01-05 01:35:39Z

I'm afraid this simply isn't possible as the following condition is true:

0. == 0

If you perform the following:

setTimeout(() => console.log(element[0].value), 100))

It will always log 0. as 0. This is why ngModelCtrl isnt triggering the parser as no changes are detected.

I would suggest not directly modifying the value of ngModel (as this can also end up leading to users putting in invalid data. ie. pasting 12.00 will resolve to 1200 with your example)

I would add a directive that applies validity depending on if a decimal point is used (technically speaking, typing 0. isn't actually using it. 0.01 is). Set the validity to false if there is a decimal point in the number and display an error message accordingly (via ngMessages). This way the user can correct their own error and can learn from the mistake.

While this seems to be true the last sentence reminds me of "you're holding it wrong" :)

Collectives™ on Stack Overflow

AngularJS number input that ignores all keys but numbers

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related