AngularJS：使选择在单击下拉菜单时起作用，ngMessages 问题答案

【问题标题】：AngularJS: make the select work on click of dropdown, ngMessages issueAngularJS：使选择在单击下拉菜单时起作用，ngMessages 问题
【发布时间】：2018-03-23 16:52:15
【问题描述】：

所以我有一个选择框，它使用ng-options 将一些值填充到下拉列表中，所以我想在用户单击下拉列表时立即显示错误消息并在不进行选择的情况下聚焦。

JS 代码

$scope.someMap = [{ name:"Abc", id:"a"},
{ name:"XYZ", id:"b"},
{ name:"FGH", id:"c"},
{ name:"TY", id:"d"}
];

HTML

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

所以它在我添加一个空白选项（如option value="" selected hidden/> </select>）并选择一些有效值然后再次选择空白选项的情况下工作，它会提供错误消息作为必填字段。

但是正如您所看到的，一旦页面加载，上面的选择框将是空白的，因此如果使用单击下拉菜单并聚焦而不选择或移动到其他字段而不选择任何值，它应该会给出错误作为必填字段。

现在，如果我尝试遍历 form.inpName.$error 的值，则永远不会有任何值，并且我无法使用上述技术对其进行验证。

我尝试过 ng-show , ng-if , message expression 可能缺乏一些专业知识。从下拉列表中选择有效条目然后返回空白选项后，它们都可以工作。

对我不起作用的解决方案

检查模型值：我不想为这些类型的字段建模并检查它们是否为空白然后显示一些错误消息，而是我想遍历 $error 数组并找到问题与领域
在页面加载时选择默认选项 - 不能这样做。
将字段添加为已选择的选项：这也不起作用，因为如果用户根本没有触摸选择并填写了所有其他字段，则不会为此选择下拉列表填充 $error。

任何帮助将不胜感激，真的很感动。

【问题讨论】：

即使我在没有使用给定代码选择值的情况下关注元素，也会看到错误消息。
真的吗？我从 2 天开始就一直在努力锻炼。您可以在谷歌浏览器中尝试吗？无需选择，只需单击下拉菜单即可查看值并单击其他位置。感谢您的宝贵时间
在 chrome 中试用。 plunker
那么有些事情搞砸了 :( 因为这个我很震惊，无法验证下拉字段，关于如何调试的任何意见？
我检查了是否添加了 ng-touched 类，如果我们在您检查 ng-if="form.inpName.$touched" 时将注意力集中在该领域之外

标签： angularjs drop-down-menu ng-options angular-ng-if ng-messages

【解决方案1】：

在上面帖子中@Ininiv 的帮助下，我发布的代码在 plunker 中运行良好，但在我的开发环境中却不行。

因此，基于某些 POJO/Entity 输出的对象被格式化为 null再次从下拉列表中。它被激活了。

但我希望它从第一次触摸就开始工作，如果留空，应该会弹出错误消息。

要解决这个问题，需要将 ngModel 设置为 null，当下拉菜单激活 $error 时，如果我将其留空并移至其他字段，则会显示错误。

因此，基本上在模型更改时，只有 ngMessages 指令被激活，这对于基于某些对象属性填充的下拉菜单不会发生。

【讨论】：