Does AngularJS align leading zeros in the model while the view / input value remains the same?

For an input element with a type number, when the entered number has leading zeros, such as "0000123456", the model is updated to 123456, while the view / enter is still the same 0000123456.

However, if I switch from number to text, everything works as expected. I would like to have a number, as it will display a numeric keypad for mobile devices.

<input type="number" ng-model="vm.orderid"/> {{vm.orderid}} 

Plunkr

+6
source share
2 answers

As pointed out by @Steve, I used the custom my-decimals , which matches the view with the model when input losses lose focus.

 <input type="number" my-decimals ng-model="vm.orderid"/> angular.directive('myDecimals', function() { return { require: 'ngModel', link: function(scope, elm, attrs, ctrl) { elm.blur(function() { var val = ctrl.$viewValue; ctrl.$setViewValue(val * 1); ctrl.$render(); }); } } }); 
+4
source

You have options for this,
usage: <input type = "tel">
It was introduced for this purpose. This is one of the new input types in HTML5.

or , <input type="text" pattern="[0-9]">
He will pick up the numeric keypad on iPhone and Android phones. You can check it out. I am not 100% sure.

+3
source

Source: https://habr.com/ru/post/980912/


All Articles