AngularJS select验证失效：如何实现排除首选项的必填校验

嘿，我明白你现在的困扰——明明加了required，但下拉框选默认选项时验证就是不生效对吧？来看看需要调整的几个关键点：

• 给默认选项添加空value属性
  你当前的默认选项<option>- Select -</option>没有设置value，AngularJS处理select的required规则时，会把这个选项的文本内容当作有效值，自然不会触发验证。把它改成这样：

  <option value="">- Select -</option>
  

  这样当用户停留在这个选项时，patient.gender会被设为空字符串，刚好符合required要求的“非空”验证逻辑。

• 初始化ng-model的默认值
  在你的控制器里，要确保patient.gender的初始值是空字符串或者undefined，比如：

  $scope.patient = {
    gender: ''
  };
  

  这样页面加载时默认选中第一个选项，此时表单的验证状态会被标记为无效，错误提示就能正常触发。

• 检查表单名称是否匹配
  你在错误提示里用了Form.gender.$invalid，那你的<form>标签必须对应设置name="Form"属性，比如：

  <form name="Form" ng-submit="handleSubmit()">
    <!-- 你的下拉框和其他表单元素 -->
  </form>
  

  如果表单名称不匹配，AngularJS找不到对应的验证对象，错误提示肯定不会显示。

最后给你个优化后的完整代码示例，还加了更友好的错误触发逻辑——只有用户触碰过下拉框或者提交表单后才显示错误：

<form name="Form" ng-submit="handleSubmit()">
  <select ng-model="patient.gender" name="gender" class="form-control" required>
    <option value="">- Select -</option>
    <option value="Male">Male</option>
    <option value="Female">Female</option>
    <option value="Other">Other</option>
  </select>
  <div class="error" ng-show="Form.gender.$invalid && (Form.gender.$touched || Form.$submitted)">
    Select gender
  </div>
</form>

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