AngularJS：ngMessages与ng-options结合使用失效问题排查

我之前也碰到过类似的情况，ng-repeat的验证好搞定，但ng-options搭配required的时候确实容易踩坑。你要实现的是“用户触碰下拉框但未选择任何选项时显示必填错误”，核心是让AngularJS的表单验证正确识别select的未选择状态，以下是具体的解决步骤：

1. 完善HTML结构，添加空默认选项 #

首先你的select标签里需要一个空的<option>作为默认提示，这样当用户没有选择任何有效选项时，ngModel会绑定到空值，才能触发required验证。补全后的HTML代码如下：

<form name="personForm">
  <select 
    name="inpName" 
    ng-model="selectedPerson" 
    ng-options="i as i.name for i in personMap track by i.id" 
    required
  >
    <option value="">-- 请选择人员 --</option>
  </select>
  <!-- 错误提示：当控件被触碰且存在required错误时显示 -->
  <div class="error-message" ng-show="personForm.inpName.$touched && personForm.inpName.$error.required">
    此项为必填项，请选择！
  </div>
</form>

2. 正确初始化ngModel #

在JS里要确保ngModel的初始值是undefined或者空值，不要设置成一个不在personMap里的对象/值，否则AngularJS会无法正确识别验证状态：

$scope.personMap = [
  { name:"Abc", id:"a"}, 
  { name:"XYZ", id:"b"}, 
  { name:"FGH", id:"c"}, 
  { name:"TY", id:"d"}
];
// 初始化为undefined，确保默认未选中任何有效选项
$scope.selectedPerson = undefined;

关键原理说明 #

• 空的<option value="">是核心：它会让select在未选择有效选项时，ngModel绑定到空字符串/undefined，这时候required验证规则才会生效。
• $touched状态：AngularJS表单控件在被用户触碰过（获得焦点后失去焦点）后，$touched会变为true，结合$error.required就能精准触发你要的“触碰后未选择”的错误提示。

如果之前你没加空选项，select会默认选中第一个有效选项，导致required永远不会触发；或者初始ngModel值设置错误，也会让验证状态异常，按照上面的方法调整后应该就能正常工作了。

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