0

我已经构建了一个自定义角度组件来从集合中选择多个元素。这个自定义元素有一个数组作为 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 上。

如何使这发生在 div 上？

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

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

4

1 回答 1

1

您不能ng-model在<div>. 从ng-model文档：

该ngModel指令使用 NgModelController 将input, select, textarea（或自定义表单控件）绑定到范围上的属性，该属性由该指令创建和公开。

于 2017-03-27T14:44:44.080 回答