如何为AngularJS验证指令添加自定义错误并在弹窗中显示所有错误

嘿，我来帮你搞定这个AngularJS验证指令的自定义错误和弹窗展示功能！咱们一步步来完善代码：

首先我们要在原有的指令基础上，加入验证规则的判断逻辑，收集自定义错误信息，并通过AngularJS的$setValidity标记字段的验证状态：

app.directive('modelValidation', function ($window) {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function (scope, elem, attr, ctrl) {
      var modelFieldName = attr.ngModel.split('.').pop(); // 提取字段名（比如从user.username拿到username）
      var fieldErrors = [];

      // 监听异步加载的validationModel
      scope.$watch('validationModel', function (newVal) {
        if (!newVal) return;
        
        // 获取当前字段对应的验证规则
        var fieldRules = newVal[modelFieldName];
        if (!fieldRules) return;

        // 添加自定义验证器
        ctrl.$validators.custom = function (modelValue, viewValue) {
          fieldErrors = [];
          var inputValue = modelValue || viewValue;

          // 示例1：必填项验证
          if (fieldRules.required && !inputValue) {
            fieldErrors.push(fieldRules.requiredMsg || '* 此字段为必填项');
            ctrl.$setValidity('required', false);
          } else {
            ctrl.$setValidity('required', true);
          }

          // 示例2：最小长度验证
          if (fieldRules.minLength && inputValue?.length < fieldRules.minLength) {
            fieldErrors.push(fieldRules.minLengthMsg || `* 长度不能少于${fieldRules.minLength}位`);
            ctrl.$setValidity('minLength', false);
          } else {
            ctrl.$setValidity('minLength', true);
          }

          // 你可以在这里扩展更多规则：比如邮箱格式、手机号验证、最大值限制等

          // 返回验证结果：无错误则为true
          return fieldErrors.length === 0;
        };

        // 将当前字段的错误绑定到ngModel控制器，方便全局收集
        ctrl.fieldErrors = fieldErrors;
      }, true);

      // 监听全局展示错误的事件
      scope.$on('triggerValidationErrors', function () {
        // 收集表单所有字段的错误
        var allErrors = [];
        var form = scope[attr.form]; // 通过form属性获取表单实例
        if (!form) return;

        angular.forEach(form, function (control) {
          // 筛选出验证不通过且有自定义错误的字段
          if (control.$error.custom && control.fieldErrors?.length) {
            allErrors = allErrors.concat(control.fieldErrors);
          }
        });

        // 弹窗展示所有错误
        if (allErrors.length) {
          $window.alert('表单验证失败：\n' + allErrors.join('\n'));
        }
      });
    }
  };
});

接下来我们在页面和控制器中配合使用这个指令：

HTML部分 #

<form name="userForm">
  <div>
    <label>用户名：</label>
    <input type="text" 
           name="username" 
           ng-model="user.username" 
           model-validation 
           form="userForm">
  </div>
  <div>
    <label>密码：</label>
    <input type="password" 
           name="password" 
           ng-model="user.password" 
           model-validation 
           form="userForm">
  </div>
  <button ng-click="submitForm()">提交表单</button>
</form>

控制器部分 #

app.controller('UserController', function ($scope, $timeout) {
  // 模拟异步加载验证规则（比如从后端接口获取）
  $timeout(function () {
    $scope.validationModel = {
      username: {
        required: true,
        requiredMsg: '* 用户名不能为空',
        minLength: 3,
        minLengthMsg: '* 用户名至少需要3个字符'
      },
      password: {
        required: true,
        requiredMsg: '* 密码不能为空',
        minLength: 6,
        minLengthMsg: '* 密码至少需要6个字符'
      }
    };
  }, 1200);

  $scope.submitForm = function () {
    // 先触发全局错误展示事件
    $scope.$broadcast('triggerValidationErrors');
    
    // 如果表单验证通过，再执行提交逻辑
    if ($scope.userForm.$valid) {
      // 这里写你的表单提交代码，比如调用后端接口
      console.log('表单提交成功！', $scope.user);
    }
  };
});

• 我们通过split('.').pop()从ngModel属性中提取纯字段名，方便匹配validationModel中的规则；
• 验证规则和错误信息都可以通过validationModel灵活配置，不需要硬编码在指令里；
• 通过广播事件triggerValidationErrors来统一触发弹窗，你也可以根据需求替换成UI框架的模态框（比如UI Bootstrap的$uibModal），让弹窗样式更美观；
• 每个字段的错误信息会绑定到对应的ngModel控制器上，方便单独展示字段级错误（如果需要的话）。

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