How can I make input field accept INTEGERS only with AngularJS

Question

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.

Answer 1

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

Answer 2

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

Answer 3

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.

Answer 4

You 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

Answer 5

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

Here is more info on directives