创建一个angular指令来改变窗体的占位符文本

Creating an angular directive for changing placeholder text for a form

本文关键字:改变 窗体 文本 占位符 指令 angular 一个 创建      更新时间:2023-09-26

这本身不是一个直接的编码问题…更像是处理这种事情的最佳实践或最聪明的方法。

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

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

Angular的表单设计,即$验证器、$格式化器和$解析器都位于输入指令级别。占位符是输入级别的一个属性。所以在最低层次的设计意图是尽可能快地提供错误反馈。

显示的时间总是可以控制在较高的水平,如果较低/粒度级别允许。你的情况是我的形式。$isvalid是一个可用的属性,因为每个表单都有一个formController。你可以使用一个句柄来访问它,这个句柄来自form的name属性。

在Angular vs. jQuery中,我们处理增强html或html元素,而不是寻找其他元素并增强它们。现在,哪个元素更适合执行您所描述的功能呢?

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

所以我的建议是在输入元素上这样做。如果你试图取悦某些老板/客户,必须在顶部显示旧风格的错误信息,你仍然可以在表单提交中实现这一点。

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

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

根据评论中的问题更新。

如果您打算在提交时进行这样的验证,请考虑以下内容:

"保存/提交"按钮适合发挥作用吗?

位置:

在。

Save/Submit按钮的主要任务是保存实体/资源,即将所有数据发送到资源端点。通常,提交按钮位于表单内部。正如各种表单元素的工作是接收用户的输入一样,提交按钮的工作是接收"我完成了"的输入。提交这个表单。此外,浏览器和其他引擎必须完成表单元素的构造才能提交,因此在外部放置表单元素有轻微的风险,或者更理想的情况下,您不应该假设超文本文档中的所有元素实际上已经完成构造。然而,jQuery/Angular在document.ready()上启动,所以所有的原始元素都存在。而是指令被处理的顺序——指令。参考$compile, preLink和postLink循环。(postLink可以访问所有子元素)。

角色/职责分工:

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

如果你不介意重复的话,你也可以像下面这样做。

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

现在您可以选择如何将占位符传递给父

1)让你的指令在输入字段级别通过调用你在窗体级别的控制器中定义的父作用域函数来告诉占位符文本的窗体作用域。或2)你可以增强angular模型,在控件上添加一个名为$placeholder或$customError的属性,并在指令中设置该值。如下所示:-

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