AngularJS：下拉框点击失焦未选值时ngMessages验证失效问题

我完全懂你的困扰——原生AngularJS的required验证在这种场景下确实有点“不上心”。问题的核心在于：当控件处于$pristine（未被修改过）状态时，哪怕你点击下拉框又失焦（触发了$touched），AngularJS也不会判定这违反了必填规则，它觉得初始的空白是默认状态，不算用户主动选择了空值。

既然你不想通过检查模型值来解决，那我们可以用自定义指令监听下拉框的失焦事件，手动触发必填验证。下面是具体的实现方案：

步骤1：添加自定义指令 #

在你的AngularJS模块中定义一个指令，专门处理这个场景：

angular.module('yourAppModule')
.directive('triggerRequiredOnBlur', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {
      // 监听下拉框的失焦事件
      element.on('blur', function() {
        // 当控件已被触碰且当前值为空时，手动标记必填错误
        if (ngModel.$touched && !ngModel.$modelValue) {
          ngModel.$setValidity('required', false);
        }
      });

      // 监听模型值变化，确保选择有效选项时恢复验证状态
      scope.$watch(function() {
        return ngModel.$modelValue;
      }, function(newVal) {
        ngModel.$setValidity('required', !!newVal);
      });
    }
  };
});

步骤2：修改HTML模板 #

把这个指令添加到你的<select>标签上，保留原有的验证提示结构即可：

<form name="form">
  <select 
    name="inpName" 
    ng-model="person.name" 
    ng-options="i as i.name for i in someMap track by i.id" 
    required
    trigger-required-on-blur
  >
    <option value="" selected hidden/>
  </select>
  <div ng-messages="form.inpName.$error" ng-if="form.inpName.$touched">
    <div ng-message="required">Required field</div>
  </div>
</form>

方案原理说明 #

• 指令监听下拉框的blur事件，只要用户点击过下拉框（$touched为true）且未选择任何值，就手动将$error.required设为true，直接触发错误提示。
• 同时监听模型值的变化，确保用户选择有效选项时，验证状态能自动恢复正常。
• 全程不需要直接检查person.name的具体值，完全符合你的需求。

现在测试一下：页面加载后点击下拉框直接失焦，错误提示会立刻显示；选择有效选项后提示消失；再切回空白选项，提示也能正常触发，完美覆盖你需要的所有场景。

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