AngularJS：ng-repeat表格内select元素ng-invalid失效问题

先看你提供的代码片段：

<td level="{{taskCtrl.level}}" check-permissions="noCommercial" ng-if="tEl.id_subtype==1 || tEl.id_subtype==2 || tEl.id_subtype==9 || tEl.id_subtype==10"> 
  <select id="vpo_{{$index}}" name="vpo_{{$index}}" class="form-control np fs-small" 
          ng-options="item.id as item.es for item in mainCtrl.vpo" 
          ng-model="tEl.vpo" ng-required="true" 
          ng-change="taskCtrl.toggleVpo(tEl);"> 
    <option value="">N.A.</option> 
  </select> 
</td>

问题原因分析 #

这个问题的核心在于Angular表单验证的pristine/dirty状态逻辑：

• 初始状态下，select控件处于pristine（未被用户触碰）状态，Angular默认不会在这种状态下触发必填项的验证错误，所以即使ng-required="true"，控件仍会显示为ng-valid。
• 当你选择一个选项再切回"N.A."时，控件变成dirty（已被交互）状态，此时ng-required会检查模型值，发现是空字符串，于是标记为ng-invalid，提交按钮也就正常禁用了。

另外还有一个细节：初始时tEl.vpo大概率是undefined，而空选项的value=""对应的模型值是空字符串，两者不匹配，也会导致Angular初始时不认为这是“未选择必填项”的状态。

可行的解决方案 #

方案1：初始化模型值为空字符串（推荐）

最直接的方法是在加载或创建tEl对象时，把vpo属性初始化为空字符串，让它和空选项的value保持一致：

// 假设你是从接口获取或本地生成tEls数组
yourTElsData.forEach(tEl => {
  // 如果vpo未定义，设置为空字符串
  if (typeof tEl.vpo === 'undefined') {
    tEl.vpo = '';
  }
});

这样初始状态下，模型值和空选项匹配，ng-required="true"会立即将控件标记为无效，不管控件是不是pristine，提交按钮会被正确禁用。

方案2：强制将控件设为脏状态

如果无法修改模型初始化逻辑，可以在控制器中，等DOM渲染完成后手动把对应的select控件设为dirty状态，触发验证：

// 记得注入$timeout服务
$timeout(() => {
  // 假设你的表单名称是taskForm
  Object.keys($scope.taskForm).forEach(controlName => {
    const control = $scope.taskForm[controlName];
    // 匹配所有vpo_开头的控件
    if (controlName.startsWith('vpo_')) {
      control.$setDirty();
    }
  });
});

$timeout是为了确保Angular已经完成表单控件的注册，避免找不到控件的情况。

方案3：调整空选项的value匹配初始模型

如果初始时tEl.vpo是undefined，可以修改空选项的value为undefined，让模型值和选项匹配：

<option value="undefined">N.A.</option>

不过这种方式不够通用，不同Angular版本对value的解析可能有差异，优先推荐方案1。

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