AngularJS中ng-minlength、ng-maxlength校验失效如何正确配置？

核心问题排查 #

• 当前input元素未显式绑定ng-minlength、ng-maxlength、ng-pattern指令，AngularJS原生校验规则需要绑定对应指令才会向表单控件的$error对象写入校验状态
• 现有ng-message配置的pattern校验键名错误，AngularJS原生ng-pattern指令对应的校验错误键名为pattern，而非ng-pattern，键名不匹配导致错误提示无法触发

修正步骤 #

1. 给input元素补充校验指令绑定 #

根据你实际的校验规则存储字段调整取值，示例如下（默认规则存储在component.options中）：

<div ng-switch-when="TextBox">
  <label class="item item-input item-stacked-label">
         <span ng-if="haveHeader" class="input-label">{{header}}</span>
         <input  type="text"  style="width:100%"
                 event="component.events" 
                 validation="component"
                 ng-blur="isInAdminFormPage && checkTextTypeNumberValidation(component.shortName)"
                 name="name{{component.shortName}}" 
                 metadata="component.options" ng-disabled="isFormViewed"  string-to-date="component.options" ng-required="requiredValidation[component.shortName]"
                 ng-model="formData[component.shortName]" string-to-number="component.options"
                 <!-- 新增以下3个校验指令 -->
                 ng-minlength="component.options.minLength"
                 ng-maxlength="component.options.maxLength"
                 ng-pattern="component.options.regexRule"
         >
    </label>
  <br>

2. 修正ng-message的pattern键名 #

<div style="color: red" ng-messages="getFormValidations(form.shortName)['name'+component.shortName].$error" ng-show="isInAdminFormPage && formInf.mainForm.$submitted">
  <div ng-message="required">{{message["required"]}}</div>
  <div ng-message="minlength">{{message["minlength"]}}</div>
  <div ng-message="maxlength">{{message["maxlength"]}}</div>
  <!-- 把原来的ng-pattern改为pattern -->
  <div ng-message="pattern">{{message["pattern"]}}</div>
</div>

可选校验（若修正后仍不生效） #

确认项目已经正确引入ngMessages依赖模块：

angular.module('yourProjectModule', ['ngMessages']);

校验规则配置参考 #

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