这本身并不是一个直接的编码问题...更像是解决此类问题的最佳实践或最聪明的方法。
我有一个带有按钮的表单，如果输入无效，该按钮应将占位符文本更改为自定义错误。所以基本上“点击”应该检查有效性。
我是否应该将整个表单包含在一个指令中，并在单击按钮时遍历每个字段并检查有效性？我的另一个解决方案包括为每个输入创建一个指令而不包括按钮，但在单击按钮时通过使用父范围以某种方式与表单交互。
【问题讨论】：
标签： javascript forms angularjs
Angular 表单设计，即 $validators、$formatters 和 $parsers 处于输入指令级别。占位符是输入级别的属性。 因此，在最低级别，设计意图是尽可能快地提供错误反馈。
如果较低/粒度级别允许，则始终可以在较高级别控制显示的时序。在您的情况下，myform.$isvalid 是一个可用属性，因为表单获得了一个 formController。您可以使用来自表单上的名称属性的句柄来访问它。
在 Angular 与 jQuery 中，我们处理增强手头的 html 或 html 元素与查找其他元素并增强它们。现在哪个元素更适合执行您描述的功能？
单个输入元素更好地配备了大多数数据，即元素上的占位符和 $validator[] 数组。您可能会在这里更改视图/颜色。
所以我的建议是在输入元素处执行此操作。 如果想取悦一些老板/客户，顶部必须有旧式错误消息，您仍然可以在表单提交时实现这一点。
将此逻辑放在表单元素上的相关问题：
您最终会进行 DOM 查找。 您的代码将更像 jQuery，因为您将获取占位符 attr 值并将其粘贴到某处。
根据评论中的问题进行了更新。
如果您要在提交时进行此类验证，请考虑这一点。
“保存/提交”按钮适用于何处？
位置：
在里面。
保存/提交按钮的主要工作是保存实体/资源，即将所有数据发送到资源端点。通常，提交按钮位于表单内。 正如各种表单元素的工作是从用户那里获取输入一样，提交按钮是接受输入说“我完成了。提交 this 表单。”。此外，浏览器和其他引擎必须已完成构建表单元素才能提交，因此放置在外部有轻微风险，或者更理想的是，您不应该假设超文本文档中的所有元素实际上都已完成构建。然而 jQuery/Angular 在 document.ready() 上引导，所以所有原始元素都存在。但是指令的处理顺序——指令。请参阅 $compile、preLink 和 postLink 循环。 （postLink 将有权访问所有子元素）。
角色/职责分工：
Form 指令在 myForm.$error[] 中维护字段级错误。其组织方式如下所示： $error.validationType = [控制] 其中每个控件都有 $name ，这是您的 . 你看 - 组织可能不是你想要的方式，即扁平，但你可以使用它来查找哪些字段无效。
另外，如果您不介意重复，但您可以执行以下操作。
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');
【讨论】：