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

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

如果我在定制元素的tpl中添加一个带有此ngModel的输入字段，则验证状态将正确更新。但是，如果它位于此自定义元素的包装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上没有发生同样的事情

如何让这一切发生在电视上

编辑： 为了提供一些上下文，该组件是一个自动完成下拉列表，它允许从下拉列表中选择多个元素。一旦选中，该项目就会进入一个选中项目的列表，以“标记”的形式显示。类似于select2“标记支持”示例：

---

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

您不能在

上使用

ng型号。从：

ngModel
指令绑定
输入
、
选择
、
文本区域
（或自定义表单）
控件）添加到使用NgModelController的作用域上的属性，即
由本指令创建和公开

那么是否有可能将ngmodel放在显示器上：无输入字段并复制其验证状态？@Olivvv看起来有点可笑，我不明白你为什么要这么做。你想要实现什么？我编辑了问题“解释我想要实现什么”。顺便说一句，我认为“自定义表单控件”意味着它也应该适用于div。这是进行内容编辑的明显方式：