如何实现表单中动态ng-include模板的逐个验证？

我之前也碰到过类似的AngularJS模板验证冲突问题，别慌，这里有几个靠谱的解决方案，你可以根据自己的场景来选：

这是最彻底的解决办法，因为ng-if会直接销毁未激活模板对应的DOM节点，未加载的模板里的表单根本不会存在于DOM中，自然不会参与验证。

你可以把原来的ng-include结构改成这样：

<!-- 只有当前选中的模板才会被渲染到DOM中 -->
<div ng-if="currentTemplate === 'template1.html'" ng-include="'template1.html'"></div>
<div ng-if="currentTemplate === 'template2.html'" ng-include="'template2.html'"></div>

当你切换currentTemplate的值时，未被选中的模板会被完全移除，只有当前激活的模板里的表单会存在，验证只会针对它生效。

如果因为某些原因不能用ng-if（比如需要保留未激活模板的状态），可以给每个模板里的表单设置唯一的name属性，然后在验证时只针对当前激活模板对应的表单操作。

比如模板1的表单：

<!-- template1.html -->
<form name="form1" novalidate>
  <!-- 表单控件 -->
</form>

模板2的表单：

<!-- template2.html -->
<form name="form2" novalidate>
  <!-- 表单控件 -->
</form>

然后在控制器里写一个针对性的验证方法：

$scope.validateCurrentForm = function() {
  // 根据当前激活的模板，只验证对应的表单
  if ($scope.currentTemplate === 'template1.html') {
    $scope.form1.$validate();
    // 这里处理form1的验证结果，比如提交逻辑
    if ($scope.form1.$valid) {
      // 提交form1的数据
    }
  } else if ($scope.currentTemplate === 'template2.html') {
    $scope.form2.$validate();
    if ($scope.form2.$valid) {
      // 提交form2的数据
    }
  }
};

最后在提交按钮上绑定这个方法：

<button ng-click="validateCurrentForm()">提交</button>

如果用的是ng-show来切换模板（它只是隐藏DOM，不会销毁），可以在切换模板时手动重置未激活表单的验证状态，让它不参与全局的验证判断。

控制器里的切换方法：

$scope.switchTemplate = function(template) {
  $scope.currentTemplate = template;
  // 重置另一个表单的 pristine（未修改）和 untouched（未触碰）状态
  if (template === 'template1.html' && $scope.form2) {
    $scope.form2.$setPristine();
    $scope.form2.$setUntouched();
  } else if (template === 'template2.html' && $scope.form1) {
    $scope.form1.$setPristine();
    $scope.form1.$setUntouched();
  }
};

然后在控制提交按钮禁用状态时，只判断当前模板的表单：

<button 
  ng-click="submit()" 
  ng-disabled="(currentTemplate === 'template1.html' && form1.$invalid) || (currentTemplate === 'template2.html' && form2.$invalid)"
>
  提交
</button>

总结：最推荐方案1，代码简洁且从根源上解决了多表单同时验证的问题；如果需要保留未激活模板的状态，可以选方案2或3。

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