Question

所以我有一个选择框，使用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>这样的空白选项并选择一些有效值然后再次选择空白选项的情况下，它会将错误消息显示为必填字段。

但正如您所看到的，一旦页面加载，上面的选择框将为空白，因此如果使用单击下拉列表并在不选择或移动到其他字段而没有选择任何值的情况下进行焦点聚焦，则应将错误视为必填字段。 / p>

现在如果我尝试迭代form.inpName的值。$ error永远不会有任何值，我无法使用上述技术验证它。

我已经尝试 ng-show , ng-if , message expression 可能缺乏一些专业知识。所有这些都可以从下拉列表中选择有效的条目然后再回到空白选项。

对我不起作用的解决方案

检查模型值：我不想转到这些类型的字段的模型，并检查它们是否为空，然后显示一些错误消息，而不是我想迭代$ error数组和找到字段的问题
在页面加载时选择默认选项 - 无法执行此操作。
添加一个字段作为选定的一个选项：这也不起作用，因为如果用户根本没有触摸选择并填充所有其他字段，则不会为此选择下拉列表填充$ error。

任何帮助都会非常感激，真的很受欢迎。

Answer 1

在上述帖子中@Ininiv的帮助下，我发布的代码在plunker上工作正常，但在我的开发环境中效果不佳。

因此，基于某些POJO / Entity out对象，其属性被格式化为null。因此，当我选择并且选项填充角度时，该角度不会被视为模型的更改，除非我从下拉列表中选择一个值并选择一个空白选项再次从下拉菜单。它被激活。

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

要解决此问题，需要将ngModel设置为null，然后在下拉菜单中激活$ error东西，如果我将其保留为空白并移至其他字段，则会显示错误。

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

AngularJS：点击下拉菜单选择工作，ngMessages问题

1 个答案: