防止输入类型号上的 maxLength

Question

我花了一段时间才弄清楚这一点，但是有人可以发布一种更简洁的方法来限制输入 type='number' 中的位数。问题之一是如果 $scope.variable = null....在输入字段中没有任何意义，则会引发错误。

<input type="number" model='modalName' ng-change="monitorLength('modalName',16)">

JS：

  $scope.monitorLength = function (model,maxLength) {
    if ($scope[model] != null) {  // prevent error on empty input field
      var len = $scope[model].toString() ;  // convert to a string
      if (len.length > maxLength) {  //evaluate string length
        $scope[model] = parseInt(len.substring(0, maxLength));  
        // convert back to number or warning is thrown on input value not being a number
      }
    }
  }

然后我需要对此进行扩展以仅考虑数字，防止任何非数字字符包括“。”和“，”符号：

  var reg = new RegExp(/^\d+$/) ;
  $scope.monitorLength = function (modal,maxLength) {
    if ($scope[modal] != null) {
      var len = $scope[modal].toString() ;
      if (len.length > maxLength) {
        $scope[modal] = parseInt(len.substring(0, maxLength));
      } else if (!reg.test(len)) {
        $scope[modal] = parseInt(len.substring(0, len.length-2));
      }
    }
  }  

有没有办法提取负责调用 ng-change 的 ng-modal？所以呼叫只需：ng-change="monitorLength(10)"。然后在函数中以某种方式动态检索调用 ng-modal？

Answer 1

有没有办法提取负责调用 ng-change 的 ng-modal？

是的。您可以定义一个指令并要求ngModelController。

.directive('maxNum', function(){
    return {
        require: '^ngModel',
        link: function($scope, elem, attrs){
            // here you can add formatters/parsers to the ngModel 
            // to affect the change on the ngModel.$viewValue.

        }
    }
})

正如@rolinger 在另一个答案中所说，使用内置指令不会阻止使用输入无效字符，它们只是将模型标记为无效。

Answer 2

这是一种更简洁的限制数量的方法，为此使用 ngMaxlength：

<input type="number" model='modalName' ng-maxlength="16">

您可以找到更多属性和信息here