如何在AngularJS控制器中访问动态生成的表单对象？

这个问题我之前也碰到过，AngularJS的表达式解析器确实不支持这种动态拼接的表单名直接作为变量使用——它会把namedForm_{{$index}}当成一个固定的变量名，而不是解析$index后拼接出来的那个表单对象。给你两种解决思路，第一种是更推荐的优雅方案，第二种是兼容你原有命名方式的变通方法：

方案一：将表单绑定到控制器的对象/数组中（推荐） #

这种方式更符合AngularJS的controllerAs风格，也更易于维护。你可以在控制器里初始化一个容器对象，然后把每个动态表单直接绑定到这个容器的对应索引上，这样不管是模板里判断有效性，还是控制器里获取表单对象都非常方便。

步骤1：控制器中初始化表单容器 #

// 假设你的控制器用了controllerAs语法，别名是vm
vm.formContainer = {}; // 如果$index是连续数字，也可以用数组：vm.formContainer = [];

步骤2：修改模板中的表单name属性和ng-submit逻辑 #

<form data-toggle="validator" class="formClass" form-submit-validation="" 
      name="vm.formContainer[$index]" id="namedForm_{{$index}}" 
      ng-submit="vm.submitNamedForm($index, widget, vm.formContainer[$index].$valid)" 
      autocomplete="off" novalidate>
  <!-- 表单内容 -->
</form>

控制器中获取表单对象 #

之后如果需要在控制器里操作这个表单（比如手动设置状态、检查有效性），直接通过索引获取即可：

vm.submitNamedForm = function(index, widget, isValid) {
  // 直接拿到对应表单对象
  var targetForm = vm.formContainer[index];
  
  if (isValid) {
    // 表单有效，执行提交逻辑
  } else {
    // 表单无效，比如显示错误提示或者标记未填字段
    targetForm.$setSubmitted(); // 手动触发表单提交状态，让验证提示显示
  }
};

方案二：通过$scope动态获取表单对象（兼容原有命名） #

如果你不想修改表单的命名规则，可以利用AngularJS会把表单对象挂载到当前作用域（$scope）的特性，通过字符串拼接的方式从$scope中取出对应的表单对象。

步骤1：修改模板的ng-submit #

只需要传入$index，不用在模板里做有效性判断：

<form data-toggle="validator" class="formClass" form-submit-validation="" 
      name="namedForm_{{$index}}" id="namedForm_{{$index}}" 
      ng-submit="vm.submitNamedForm($index, widget)" 
      autocomplete="off" novalidate>
  <!-- 表单内容 -->
</form>

步骤2：控制器中通过$scope获取表单 #

// 记得注入$scope到控制器中
app.controller('YourController', ['$scope', function($scope) {
  var vm = this;
  
  vm.submitNamedForm = function(index, widget) {
    // 通过字符串拼接生成表单名，从$scope中取出
    var formName = 'namedForm_' + index;
    var targetForm = $scope[formName];
    
    if (!targetForm) {
      // 表单不存在的异常处理
      return;
    }
    
    var isValid = targetForm.$valid;
    if (isValid) {
      // 有效逻辑
    } else {
      // 无效逻辑
    }
  };
}]);

总结 #

方案一的代码更清晰、更符合AngularJS的最佳实践，后续维护和扩展也更方便；方案二更适合需要保留原有表单命名规则的场景。两种方法都能解决你当前的语法错误问题，并且实现动态表单的有效性检查。

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