我正在尝试了解 angularjs 中的自定义表单验证。我遵循了一个示例，该示例定义了一个指令，根据它是否包含“e”字符，将input 文本字段设置为有效或无效。这似乎有效，因为 css 样式会根据有效性发生变化。但是，即使字段无效，表单仍然允许按下提交按钮。以下 plunker 显示了一个简单的示例。如果输入字段无效，它会为输入字段绘制一个红色边框。
Plunker：http://plnkr.co/edit/84NpBl9nmL5Qda96YF8d?p=preview
请注意，如果文本字段为空，则会禁用“添加”按钮，这是由于 required 属性，但我希望在字段无效时也禁用该按钮。我错过了什么？我想我希望required 意味着“有效”，而不仅仅是“非空”。
【问题讨论】：
标签： javascript angularjs
我已经想出了如何做我想做的事。首先，required 只要求存在一些价值。为了验证禁用提交按钮的控件，我需要使用 ng-disabled 并让它调用一个 js 函数来确定状态。
input 字段的 angular 指令现在将变量设置为 true 或 false 以记录是否应禁用添加按钮，并且该变量是在 nb-disabled 测试中检查的。它还继续调用$setValidity，这样css 仍然会在视觉上将该字段标记为无效。
这是一个显示更改的新插件。我还使用了ng-repeat 来展示如果重复有多个表单，它将如何工作。
Plunker：http://plnkr.co/edit/HYYPvFFARL1m0WBr3WrM?p=preview
主要更改是对myDirective 的修改以更改scope.disableAdd[] 的值，以及提交按钮的ng-disabled="checkDisableAdd({{$index}})" 属性。
【讨论】：