AngularJS中ng-maxlength对number类型input不生效，求原因解析

我来帮你拆解问题根源，以及对应的解决办法：

核心原因 #

ng-maxlength这个指令的设计初衷是验证输入值的字符串长度，而非限制数字的位数或数值大小。当你的input是type="number"时，AngularJS会把ng-model绑定的值处理成数字类型，这时候ng-maxlength只会把数字转成字符串后检查长度，但它不会主动阻止用户输入超过长度的数字——最多只会在表单验证时给input加上ng-invalid-maxlength的错误类，不会限制输入行为。

再加上你用的是AngularJS 1.2.5这个较早期的版本，它对number类型input的指令支持本来就有局限，这就导致你完全看不到预期的限制效果。

解决方案 #

根据你的业务场景（设置账单截止日，数值范围应该是1-31），给你几个可行的方案：

1. 用原生max/min限制数值范围（最适配你的需求）

如果你要限制的是数字的数值范围（比如1到31），直接用HTML原生的max和min属性就够了，这和你的业务需求更匹配：

<input type="number" step="1" min="1" max="31" class="form-control" 
       ng-model="BillCutdateSet" />

多数现代浏览器会直接阻止输入超出范围的数字，AngularJS也会在表单验证时标记错误。

2. 自定义指令限制数字位数（如果确实需要限制位数）

如果你的需求是必须限制输入的数字最多2位（比如不管数值，只允许1-99），可以写一个简单的自定义指令来拦截输入：

// 先确保你的Angular模块已定义，比如：
angular.module('yourApp', []).directive('maxDigits', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModelCtrl) {
      var maxDigits = parseInt(attrs.maxDigits, 10);
      // 处理输入值
      ngModelCtrl.$parsers.push(function(inputValue) {
        if (!inputValue) return '';
        // 把数字转成字符串后截取前maxDigits位
        var trimmedValue = inputValue.toString().slice(0, maxDigits);
        // 如果处理后的值和原输入不同，更新视图
        if (trimmedValue !== inputValue.toString()) {
          ngModelCtrl.$setViewValue(trimmedValue);
          ngModelCtrl.$render();
        }
        // 转成数字返回给ngModel
        return parseInt(trimmedValue, 10);
      });
    }
  };
});

然后在input上使用这个指令：

<input type="number" step="1" min="1" max="31" class="form-control" 
       ng-model="BillCutdateSet" max-digits="2" />

这样就能强制用户最多输入2位数字了。

3. 仅做表单验证（不阻止输入）

如果你不需要阻止用户输入，只是想在输入不符合要求时提示错误，可以保留ng-maxlength="2"，然后配合表单验证提示：

<form name="billDateForm">
  <input type="number" step="1" min="1" max="31" class="form-control" 
         ng-model="BillCutdateSet" ng-maxlength="2" name="billCutdate" />
  <div ng-show="billDateForm.billCutdate.$error.maxlength" style="color:red;">
    最多只能输入2位数字
  </div>
</form>

这不会阻止输入，但会在用户输入超过2位时显示错误提示。

内容的提问来源于stack exchange，提问作者Nadeem