我尝试创建自定义指令以生成ng-form
的输入,并且这些输入应该能够根据当前在给定字段中的错误显示包含信息的工具提示。< / p>
我遇到的问题是尝试让工具提示模板能够读取自定义指令的ng-model
,以查看它所在的字段何时为$invalid
或者不显示绿色复选标记或特定表单错误消息。但是当字段内容发生变化时,指令中的ng-model
似乎没有更新它的$invalid
值。
https://plnkr.co/edit/sBKZgaGzFZtAz5Ntl2FD?p=preview
我已经将一个基本的plunker与指令和一些虚拟数据放在一起来说明。我希望当我退出输入中的所有内容时,所需的失效应该导致工具提示中的内容显示为true而不是false,因为失效现在应该是false。
如果有人可以帮助我理解这一点,那就太棒了。
答案 0 :(得分:0)
通过你的例子,我在多个地方发现了问题:
<强> 1)强>
在import-input
指令中,检查最大和最小长度的正确属性为ng-minlength
和ng-maxlength
。
<强> 2)强>
在index.html
中,您应该将import-input
指令包含在form
中。这对于下一个问题至关重要,通常是正确验证的好主意。
第3)强>
检查输入字段是否无效时,我发现转到$$parentForm
ctrl
属性会显示该字段的valididty的正确值。表单对象具有每个子元素的属性,其属性名称与name
属性相同。由于您在创建元素时动态生成name
属性,因此可以使用此相同变量来处理$$parentForm
中的元素。将范围设置为无效将如下所示:
scope.invalid = ctrl.$$parentForm[elementName].$invalid
我已经从您的版本中添加了一个带有这些更改的工作的plunker: 的 https://plnkr.co/edit/Ja7Wxqq6KWOk1IXXr7U0?p=preview 强>