Question

我已经构建了一个自定义角度组件来从集合中选择多个元素。此自定义元素具有作为ngModel的数组。我希望它反映验证状态，即：ng-invalid ng-invalid-required。

如果我使用此ngModel在自定义元素的tpl中添加一个输入字段，则验证状态会正确更新。但如果它位于此自定义元素的包装div上，则它不起作用：

<input type="text" ng-model="$ctrl.selected" name="selected" required /><!--WORKS-->
<div
    class="pseudoField"
    ng-model="$ctrl.selected"
    required
    name="test"
><!--NOT WORKING-->

如果提交包含该自定义元素的表单，则验证状态将在输入中正确反映。它获得了css类：“ng-invalid ng-invalid-required。”但同样的事情并没有在div上发生。

如何在div上发生这种情况？

编辑：为了给出一些上下文，该组件是一个自动完成 - 下拉的东西，允许从下拉列表中显示的列表中选择多个元素。选择后，该项目将显示所选项目的列表，如“标签”。它类似于select2“标记支持”示例：https://select2.github.io/examples.html

为了实现这一目标，我已将输入包装在容器div“.pseudoField”中。单击容器div时，它会将焦点传递给该输入元素。输入已删除其边框样式，因此它是“不可见的”。当输入被聚焦时，div.pseudoField的样式被更改为使其看起来像是聚焦的。这样，对于用户来说，div.pseudoField就像一个表单元素，我希望它也具有验证状态。希望这是有道理的。

Answer 1

您无法在ng-model上使用<div>。来自ng-model docs：

ngModel指令绑定input，select，textarea（或自定义表单）使用NgModelController对范围内的属性进行控制由该指令创建和公开。

如何在自定义元素上反映验证状态？

1 个答案: