AngularJS 1.3.2中如何验证被ng-if隐藏的多表单？

首先得明确核心问题：ng-if会直接从DOM中移除未匹配的元素，这意味着被隐藏步骤里的表单控件根本不会被注册到主表单form的ngModel集合中，自然无法参与必填字段的有效性校验。针对这个问题，有几个实用的解决方案：

方案1：改用ng-show/ng-hide替代ng-if #

这是最直接的解决方式——ng-show/ng-hide只是通过CSS的display属性隐藏元素，DOM结构会完整保留，所有步骤的表单控件都会被主表单纳入校验范围。只有当所有步骤的必填字段都验证通过时，主表单的$invalid才会变为false，提交按钮才能启用。

示例代码：

<ng-form name="mainForm">
  <!-- 步骤1：仅当前步骤为1时显示 -->
  <div ng-show="currentStep === 1">
    <field blueprint="step1Blueprint"></field>
  </div>

  <!-- 步骤2：仅当前步骤为2时显示 -->
  <div ng-show="currentStep === 2">
    <field blueprint="step2Blueprint"></field>
  </div>

  <!-- 提交按钮：所有步骤验证通过才可用 -->
  <button type="submit" ng-disabled="mainForm.$invalid">提交表单</button>
</ng-form>

如果你的表单步骤不算特别多，这个方案几乎没有性能负担，是首选。

方案2：手动跟踪各步骤有效性（必须用ng-if时） #

如果因为性能或业务逻辑限制必须用ng-if，可以给每个步骤单独创建子表单，然后在控制器中手动记录每个步骤的验证状态，只有所有步骤都通过时才允许提交。

示例代码：

<ng-form name="mainForm">
  <!-- 步骤1子表单 -->
  <div ng-if="currentStep === 1">
    <ng-form name="step1Form">
      <field blueprint="step1Blueprint"></field>
    </ng-form>
  </div>

  <!-- 步骤2子表单 -->
  <div ng-if="currentStep === 2">
    <ng-form name="step2Form">
      <field blueprint="step2Blueprint"></field>
    </ng-form>
  </div>

  <!-- 提交按钮：依赖自定义的全步骤验证函数 -->
  <button type="submit" ng-disabled="!isAllStepsValid()">提交表单</button>
</ng-form>

控制器逻辑：

// 存储各步骤的验证状态
$scope.stepValidity = {
  step1Form: false,
  step2Form: false
};

// 切换步骤时，先验证当前步骤并记录状态
$scope.goToNextStep = function() {
  var currentStepForm = $scope['step' + $scope.currentStep + 'Form'];
  if (currentStepForm && currentStepForm.$valid) {
    $scope.stepValidity['step' + $scope.currentStep + 'Form'] = true;
    $scope.currentStep++;
  }
};

// 检查所有步骤是否都验证通过
$scope.isAllStepsValid = function() {
  return Object.values($scope.stepValidity).every(isValid => isValid);
};

这种方式需要额外维护步骤状态，但能满足ng-if场景下的全表单验证需求。

额外提示 #

如果你的表单步骤是独立模板，可以用ng-include配合缓存（AngularJS 1.3默认开启模板缓存），效果和ng-show类似，同时能更好地分离代码结构。

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