AngularJSのinputで整数のみを入力可とする

やりたいこと

input要素を使用して数値入力を行うフォームを提供する際、整数のみを入力させたい場合があります。このような場合、ngPatternを使用することで、バリデーションにより整数以外の入力を弾くことができます。

しかし、ドット(".")や"e"をそもそも最初から入力禁止としたい場合はどうでしょう。その時は、directiveを作成することでそのような動作を実現することができます。

directiveの作成

以下に、小数の入力禁止するdirective integer のサンプルコードを示します。

var app = angular.module('myModule', []);

app.directive('integer', function() {
  var directive = {
    link: link,
    restrict: 'A',
  };

  function link(scope, element, attrs) {
    element.bind("keydown keypress", function(event) {
      if (event.key === '.' || event.key === 'e') {
        event.preventDefault();
      }
    });
  }

  return directive;
});

このdirectiveでは、キー入力が発生する度にその内容をチェックし、ドット(".")か"e"が入力されていればその内容を無視するようにしています。
viewでは、次のようにintegerを使用します。

<input type="number" ng-model="value" integer>

補足: ngPatternを使用する場合

ngPatternを使用して整数のみを正常な入力として扱う場合は、次のようにします。

<input type="number" ng-model="value" ng-pattern="/^-?\d+$/">