如何在AngularJS中设置xeditable下拉选择框为必填项

我之前也踩过这个坑！Angular-xeditable的editable-select组件对Angular原生的ng-required支持并不友好，直接加e-ng-required确实不会生效。下面给你两种经过验证的解决方法：

方法一：使用xeditable自带的e-required属性 #

xeditable有自己的必填校验指令，不需要加ng-前缀，直接使用e-required="true"就能触发必填校验。修改你的代码如下：

<form editable-form name="tableform" onaftersave="tableform.$valid && saveSubmissions()" oncancel="cancel()">
  <table>
    <!-- 表格头部和其他列... -->
    <tr ng-repeat="currentRow in dataRows">
      <td>
        <span editable-select="currentRow.vendorID" 
              e-ng-options="x.vendorId as x.name for x in vendors" 
              e-form="tableform" 
              e-required="true">
          {{showVendor(currentRow)}}
        </span>
      </td>
      <!-- 其他列... -->
    </tr>
  </table>
</form>

注意我还修改了onaftersave事件，增加了tableform.$valid判断——这样只有当表单所有校验通过时，才会执行saveSubmissions()，避免无效提交。

方法二：自定义校验函数（适合复杂场景） #

如果你的必填逻辑需要动态判断（比如根据其他字段的值决定是否必填），可以用e-validator绑定自定义校验函数：

1. 在你的Angular控制器中添加校验函数：

$scope.validateVendor = function(value) {
  if (!value) {
    return '请选择供应商！'; // 返回错误信息，为空则表示校验通过
  }
};

2. 在editable-select上绑定这个函数：

<span editable-select="currentRow.vendorID" 
      e-ng-options="x.vendorId as x.name for x in vendors" 
      e-form="tableform" 
      e-validator="validateVendor">
  {{showVendor(currentRow)}}
</span>

这种方式更灵活，你可以在函数里加入任何自定义的校验逻辑，比如判断值是否在合法范围内等。

额外注意事项 #

• 确保你的vendors数组中的选项值（x.vendorId）不是空值，否则用户选择空值还是会绕过校验；
• 如果表单中有多个可编辑控件，记得给每个控件都加上对应的校验规则，并且依赖tableform.$valid来控制提交。

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