How can I prevent typing anything except digits (integers) into an input field with angularJS
type="number" allows floating point numbers
I also tried several regexes with ng-pattern, but those floating points were still allowed, although I explicitly specified digits only.
I'm fiddling with watchers at the moment, but can't make them work properly, at least not yet. I'm thinking of writing keydown event handlers for these fields, but still hoping there's better way.
This will make the input to a stepMitchMatch if entering something like 1.4
Regex pattern is unnecessary as you can do it with common attributes
:invalid{
background: red
}
:valid{
background: lime
}<input type="number" step="1">If you need to overdo it, then use angular-ui/mask with 9?9?9?9?9?9?9?9?9?9? as the masked value
Try this:
<input type="number" step="1" ng-pattern="^[0-9]+$">
The regex will fail anything other then a round integer and the step will automatically make the up/down arrows add/subtract 1
You can use a regex string within ng-pattern to validate your input.
ng-pattern="^-?[0-9]*$"
If you want to only allow positive numbers, remove the "-?"
You can also test out your patterns at the bottom of this page: https://docs.angularjs.org/api/ng/directive/ngPattern
Edit:
I missed that you want to prevent users from typing invalid characters. There's an solution over here: https://stackoverflow.com/a/28975658/6440513 that answers your question, and you can use the regex pattern within the directive provided there.
Create a directive may be?
myApp.directive("myNumber", function() {
return {
restrict: "EA",
template: "<input type='number' step='1' />",
replace: true,
link: function(scope, e, attrs) {
e.bind("keydown", function(e) {
if (!(e.keyCode >= 48 && e.keyCode <= 57)) {
e.preventDefault();
}
});
}
};
});
then use it in your app like so
<div ng-app="myApp">
<my-number><my-number>
</div>
You can garnish it further to allow bindings, and special keys
myApp.directive("myNumber", function() {
return {
restrict: "EA",
template: "<input type='text' ng-model='model' />",
replace: true,
scope: {model : "="},
link: function(scope, e, attrs) {
e.bind("keydown", function(e) {
// Special request from @endless for all these keys to be exempted
//
if (e.ctrlKey || e.altKey || e.keyCode >= 0 && e.keyCode <= 31 || e.keyCode >= 33 && e.keyCode <= 40 || e.keyCode==46) {
return;
}
else if (!(e.ctrlKey || (e.keyCode >= 48 && e.keyCode <= 57 && !e.shiftKey))) {
e.preventDefault();
}
}).bind("change", function() {
var e = angular.element(this);
if (isNaN(parseInt(e.val())) || e.val().indexOf(".") >= 0) {
alert("incorrect number value entered");
e.val("");
}
});
}
};
});
Here is a working plunkr example
Here is another fork of the above that allows all the special keys
input[type="number"] for the keyboard controlsYou can use ng-pattern to resolve this
<input type="number" ng-pattern="/^[0-9]{1,7}$/">
This will let you enter numbers in the range of 0-9999999
