AngularJS 1.x：如何实现多控件至少一个必填的表单验证？

这种“至少填写一个输入框”的自定义验证需求，AngularJS的指令系统完全能搞定，而且可以做得灵活可复用。我给你分享一个实用的实现方案：

实现思路 #

我们可以编写一个自定义指令，作用在表单（或输入框的父容器）上，指定需要检查的输入框分组，然后监听输入变化和表单提交事件，判断分组内是否至少有一个输入框有非空值，最后通过表单的验证状态来控制错误提示的显示。

具体代码实现 #

1. HTML结构 #

首先是表单和输入框的布局，给需要分组检查的输入框加上统一的类名，同时绑定表单和错误提示：

<form name="myForm" at-least-one="required-group" ng-submit="submitForm()">
  <div>
    <label>输入框1:</label>
    <input type="text" name="input1" class="required-group" ng-model="formData.input1">
  </div>
  <div>
    <label>输入框2:</label>
    <input type="text" name="input2" class="required-group" ng-model="formData.input2">
  </div>
  <div>
    <label>输入框3:</label>
    <input type="text" name="input3" class="required-group" ng-model="formData.input3">
  </div>
  <div>
    <label>输入框4:</label>
    <input type="text" name="input4" class="required-group" ng-model="formData.input4">
  </div>

  <!-- 错误提示 -->
  <div class="error" ng-show="myForm.$submitted && myForm.$error.atLeastOne">
    *Value is Required
  </div>

  <button type="submit" ng-disabled="myForm.$invalid">提交</button>
</form>

2. 自定义AngularJS指令 #

接下来编写核心的atLeastOne指令，它会关联表单控制器，检查分组内的输入框状态：

angular.module('myApp', [])
.directive('atLeastOne', function() {
  return {
    require: '^form', // 依赖父级表单的控制器
    link: function(scope, element, attrs, formCtrl) {
      // 获取需要检查的输入框分组类名
      const groupClass = attrs.atLeastOne;
      // 找到分组内的所有输入框元素
      const inputElements = element.find(`.${groupClass}`);
      // 获取每个输入框的ngModel控制器数组
      const inputControllers = Array.from(inputElements).map(el => 
        angular.element(el).controller('ngModel')
      );

      // 定义验证函数
      const validate = () => {
        // 检查是否至少有一个输入框有非空值
        const hasValidValue = inputControllers.some(ctrl => 
          ctrl && ctrl.$viewValue && ctrl.$viewValue.trim() !== ''
        );
        // 设置表单的自定义验证状态
        formCtrl.$setValidity('atLeastOne', hasValidValue);
      };

      // 监听每个输入框的变化，实时验证
      inputControllers.forEach(ctrl => {
        if (ctrl) {
          ctrl.$viewChangeListeners.push(validate);
        }
      });

      // 监听表单提交事件，确保提交时强制验证
      scope.$watch(() => formCtrl.$submitted, (submitted) => {
        if (submitted) {
          validate();
        }
      });
    }
  };
})
.controller('myController', function($scope) {
  $scope.formData = {};
  $scope.submitForm = function() {
    if ($scope.myForm.$valid) {
      // 表单验证通过，执行提交逻辑
      console.log('表单提交成功:', $scope.formData);
    }
  };
});

代码说明 #

• 指令依赖^form：确保我们能拿到表单的控制器，从而修改表单的验证状态。
• 分组类名：通过at-least-one="required-group"指定要检查的输入框分组，这样同一个表单里可以有多个不同的验证分组，复用性更强。
• 实时验证：监听每个输入框的$viewChangeListeners，输入内容变化时自动触发验证。
• 提交时强制验证：即使用户没修改任何输入直接点击提交，也会触发验证并显示错误提示。
• 错误提示控制：通过myForm.$submitted && myForm.$error.atLeastOne判断是否显示错误信息，只有提交后验证不通过才会显示。

这个方案既满足了你的需求，又保持了AngularJS的规范，而且可以轻松扩展到更多输入框或者多个分组的场景。

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