【问题标题】：AngularJS - Form validation triggered on loadAngularJS - 加载时触发表单验证
【发布时间】：2015-10-21 01:55:34
【问题描述】：

我在表单中添加了“必需”和“模式”等字段验证属性，并且表单位于 ng-controller 中。验证有效。但似乎验证是在页面加载时触发的，我看到所有字段在页面加载时都被标记为无效并显示错误消息。

我尝试按照 AngularJS 网站上的示例在表单中添加“novalidation”属性，但没有成功。

我希望在用户第一次尝试与之交互时触发验证。我该怎么做？

更新

这是一个例子https://jsfiddle.net/davidshen84/00t197gx/

<div class="mdl-cell mdl-cell-6-col mdl-textfield mdl-js-textfield">
  <input class="mdl-textfield__input" type="text" id="screenname" pattern="[a-zA-Z0-9]{3,}" ng-model="comment.screenname" required/>
  <label class="mdl-textfield__label" for="screenname">Screen Name</label>
</div>

加载时，您应该看到所有输入字段下方都有一条红线，表示它们处于无效状态。验证后该线变为蓝色。

注意：检查按钮上的样式不起作用……应该不是问题的关注点。

【问题讨论】：

你能加点markup吗？你如何显示验证？使用ng-messages 或显示和隐藏divs 使用ng-show..？
这听起来不像是正常行为，但如果没有您的代码示例，很难知道为什么会发生这种情况或提供替代方案。

标签： angularjs validation

【解决方案1】：

Angular 将在任何时候（加载或稍后）以相同的方式检查表单并呈现结果。如果您不想在加载时显示结果，请添加逻辑以检查表单是否已交互。您可以使用ng-if="yourFormName.$dirty" 隐藏错误消息，或使用yourFormName.yourFieldName.$dirty 根据单个字段的状态显示。

Click here for live demo.

【讨论】：

是的，我想过这个方法。但我的情况有点复杂，因为我的代码与 material.js 混合在一起
如果用户只是在字段中切换，这将不起作用，因为 $dirty 仅在控件的模型被修改时分配。

【解决方案2】：

当前实现的（错误的恕我直言）是 MDL 自动验证输入并且不介意“novalidate”表单属性。我必须对空输入值进行检查（跳过验证并删除 is-invalid 类），并且由于角度表单验证需要“novalidate”属性，请检查：

if (input.form.novalidate = true) // skip validation

这样您实际上可以关闭 mdl 验证并将所有内容留给 Angular。实际上还需要一件事。您可以创建验证表达式的角度指令，并在必要时添加 is-invalid 类：

div class="mdl-textfield" mdl-validator="form.email.$error"

【讨论】：