如何在含ng-repeat的动态表单中通过验证控制按钮启用/禁用？

嘿，这个动态列表的表单必填验证场景我之前处理过，用Angular自带的表单验证机制就能轻松搞定，我给你一步步拆解实现思路：

1. 搭建基础表单结构，绑定验证规则 #

首先得给外层表单设置name属性，这样Angular才能生成对应的FormController来管理验证状态。然后在ng-repeat循环生成的每个输入框上，要做三件事：

• 绑定ngModel到数组元素的对应字段（比如item.value），让Angular能跟踪输入内容
• 添加required指令，标记这个字段为必填项
• 设置唯一的name属性（可以用循环索引$index生成，比如input_{{$index}}），这样表单控制器能区分每个动态生成的输入框

示例代码如下：

<form name="dynamicForm" ng-submit="handleSubmit()">
  <!-- 动态生成的输入项 -->
  <div ng-repeat="item in formItems track by $index">
    <input type="text"
           name="field_{{$index}}"
           ng-model="item.content"
           required
           placeholder="请输入内容">
    <!-- 可选：添加必填错误提示 -->
    <span class="error" ng-show="dynamicForm['field_' + $index].$error.required">此字段不能为空</span>
  </div>

  <!-- 提交按钮：通过表单状态控制禁用 -->
  <button type="submit" ng-disabled="dynamicForm.$invalid">提交表单</button>
</form>

2. 利用表单的$invalid状态控制按钮 #

Angular的表单控制器会自动监控所有带ngModel和验证指令的控件状态：

• 只要有任何一个必填字段为空，整个表单的$invalid属性就会变成true
• 当所有必填字段都填写完毕，$invalid会切换为false

所以直接用ng-disabled="dynamicForm.$invalid"就能实现“验证不通过禁用按钮，通过则启用”的需求，完全不用手动写复杂的判断逻辑。

3. 适配数组动态变化的场景 #

不管是添加新的数组元素，还是删除已有元素，Angular都会自动感知ng-repeat生成的控件变化。只要新添加的输入框都正确设置了ngModel、required和唯一name，表单的验证状态会自动更新，按钮的禁用/启用状态也会跟着同步，不需要额外写代码去手动刷新。

如果遇到特殊场景（比如手动修改数组后验证没及时更新），可以在修改数组的方法里手动触发表单验证：

$scope.addNewItem = function() {
  $scope.formItems.push({content: ''});
  // 强制表单重新验证所有控件
  $scope.dynamicForm.$validate();
};

这样一套下来，不管数组怎么动态变化，都能保证只有所有文本字段都填好时，提交按钮才会启用，完美贴合你的需求~

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