创建角度指令以更改表单的占位符文本

时间:2014-08-04 22:24:09

标签: javascript forms angularjs

这本身并不是一个直接的编码问题...更像是什么是最好的做法或最聪明的方式去做这样的事情。

我有一个带有按钮的表单,如果输入无效,应该将占位符文本更改为自定义错误。所以基本上“点击”应该检查有效性。

我是否只是在指令中包围整个表单并在单击按钮时遍历每个字段并检查有效性?我的另一个解决方案包括为每个输入创建一个指令而不包括按钮,但是当单击按钮时,通过使用父作用域以某种方式与表单交互。

1 个答案:

答案 0 :(得分:1)

Angular表单设计,即$ validators,$ formatters和$ parsers处于输入指令级别。占位符是输入级别的属性。 因此,在最低级别,设计意图是尽快提供错误反馈。

如果较低/粒度级别允许,则始终可以将显示的时间控制在较高级别。在你的情况下myform。$ isvalid是一个可用的属性,因为form表格获得了一个formController。您可以使用来自表单上的name属性的句柄来访问它。

在Angular vs. jQuery中,我们处理增强手头的html或html元素与查找其他元素并增强它们。现在哪个元素更适合执行您描述的功能?

单个输入元素更好地配备了大多数数据,即占位符和元素上的$ validator []数组。你可以在这里改变视图/颜色。

所以我的建议是在input元素处执行此操作。 如果试图取悦一些老板/客户必须在顶部有旧式错误信息,你仍然可以在表格提交上实现这一点。

将此逻辑放在表单元素上的相关问题:

您最终将进行DOM查找。 您的代码将更像jQuery,因为您将获取占位符attr值并将其粘贴到某处。

根据评论中的问题更新。

如果您要在提交时进行此类验证,请考虑这一点。

“保存/提交”按钮适合发挥?

放置:

在里面。

保存/提交按钮的主要工作是保存实体/资源,即将所有数据发送到资源端点。通常,提交按钮位于表单内。 正如各种表单元素的工作是从用户那里获取输入一样,提交按钮将输入一个“我已完成。提交表单”的输入。此外,浏览器和其他引擎必须已经完成构建表单元素才能提交,因此放置外部有轻微的风险,或者理想情况下,您不应该假设超文本文档中的所有元素实际上已完成构建。但是在document.ready()上有jQuery / Angular bootstra,所以所有原始元素都存在。但处理指令的顺序 - 指令。请参阅$ compile,preLink和postLink周期。 (postLink可以访问所有子元素。)

角色/责任分工:

Form指令维护myForm中的字段级错误。$ error []。这种方式的组织方式如下所示:      $ error.validationType = [control] 其中每个控件都有$ name,这是你的名字attr。 你看 - 组织可能不是你想要的那样,即平坦,但你可以用它来查找哪些字段是无效的。

此外,如果你不记得重复,但你可以做下面的事情。

myForm.userName.$valid = {{myForm.userName.$valid}}
//downside is the form have to know all the children input names

现在,您可以选择如何将占位符与父级

进行通信

1)让您在输入字段级别的指令通过调用在您自己的控制器中在表单级别定义的父作用域函数来告知占位符文本的表单范围。 要么 2)您可以增强角度模型,在名为$ placeholder或$ customError的控件上添加一个属性,并在指令中设置值。如下所示: -

   var myform = elm.parent().controller('form');
   myform['yourInputName'].*$placeholder* = attr.$get('placeholder');