Question

我在角度js中构建应用程序。我想创建一个限制输入字段，只接受3,6,9,12,15等。如果用户写例如8，则应将其标记为无效。

我无法找到如何做到这一点，我们将不胜感激。

Answer 1

您可以创建一个指令并添加自己的validator来检查3的倍数。

标记：

<input name="numberField" type="number" data-ng-model="model.number" data-multiple-validator="3"/>

JS：

app.directive('multipleValidator', [function(){
  return {
    restrict: 'AC',
    require: 'ngModel',
    link: function(scope, elem, attr, ngModelCtrl) {
      if (!ngModelCtrl) {
        return;
      }

      var multiple = parseInt(attr.multipleValidator);

      if (!multiple) {
        return;
      }

      ngModelCtrl.$validators.multipleValidator = function(modelValue, viewValue) {
        return !!modelValue && modelValue%multiple === 0;
      }
    }
  }
}])

如果只有3号，6号，9号，12号和15号，那么您可以像这样使用ng-pattern

<input name="numberField" type="number" data-ng-model="model.number" data-ng-pattern="/^(3|6|9|12|15)$/"/>

修改

如果您的multiple值是动态的，那么您必须使用非常方便的$observe来查看指令中的更改，并在更改时重新进行验证。查看更新的plunker。

标记：

<input placeholder="input" name="numberField" type="number" data-ng-model="model.number" data-multiple-validator="{{model.multiple}}"/>

JS：

app.directive('multipleValidator', [function(){ return { restrict: 'AC', require: 'ngModel', link: function(scope, elem, attr, ngModelCtrl) { if (!ngModelCtrl) { return; } ngModelCtrl.$validators.multipleValidator = function(modelValue, viewValue) { var multiple = parseInt(attr.multipleValidator); if (!multiple) { // If there is no multiple then assume that it is valid return true; } return !!modelValue && modelValue%multiple === 0; } // Watch for changes to the multipleValidator attribute attr.$observe('multipleValidator', function(newVal, oldVal) { // Re-validate the input when a change is detected ngModelCtrl.$validate(); }); } } }]);

Answer 2

无需使用自定义指令。 Angular内置了一个名为ng-pattern的指令，它允许您将输入字段与给定的正则表达式进行匹配。

以下是我如何实现这一目标.. CODE ...

<html ng-app="num">
  <head>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  </head>
  <body ng-controller="numCtrl">
    <form class="digits" name="digits">
      <input type="text" placeholder="digits here plz" name="nums" ng-model="nums" required ng-pattern="/^([0369]|[258][0369]*[147]|[147]([0369]|[147][0369]*[258])*[258]|[258][0369]*[258]([0369]|[147][0369]*[258])*[258]|[147]([0369]|[147][0369]*[258])*[147][0369]*[147]|[258][0369]*[258]([0369]|[147][0369]*[258])*[147][0369]*[147])*$/" />
      <p class="alert" ng-show="digits.nums.$error.pattern">Multiples of three only accepted.</p> 
      <br>
    </form>
      <script>
      var app = angular.module('num',[]);

app.controller('numCtrl', function($scope, $http){
  $scope.digits = {};
});
      </script>
  </body>
</html>

Answer 3

请参阅此jsfiddle以获取工作示例https://jsfiddle.net/s7mmvxq5/5/ 我采用的方法是创建一个指令，只需在表单字段中添加一个$validator。由于验证器只是一个功能，你可以做任何你喜欢的检查。角度文档的这一部分可能很有用https://docs.angularjs.org/guide/forms#custom-validation

角度js，如何将输入值限制为只有几个数字

3 个答案: