AngularJS-加载时触发表单验证

我在表单中添加了字段验证属性，如“required”和“pattern”，表单位于ng控制器中。验证有效。但似乎验证是在页面加载时触发的，我看到所有字段在页面加载时都被标记为无效，并显示错误消息

我试图在表单中添加“novalidation”属性，如AngularJS网站上的示例所示，但没有成功

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

更新 这里有一个例子

屏幕名称

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

---

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

Angular将在任何点（加载或更高版本）以相同的方式检查表单并呈现结果。如果不希望在加载时显示结果，请添加逻辑以检查表单是否已与交互。您可以使用

ng if=“yourFormName.$dirty”

隐藏错误消息，或者使用

yourFormName.yourFieldName.$dirty

根据单个字段的状态显示错误消息

---

目前实现的（错误的IMHO）是MDL自动验证输入，而不介意“novalidate”表单属性。我必须对空输入值进行检查（跳过验证并删除无效类），并且由于角度形式验证需要“novalidate”属性，请检查：

if（input.form.novalidate=true）//跳过验证

这样，您实际上可以关闭mdl验证并将所有内容留给angular。 实际上还需要做一件事。您可以创建用于验证表达式的angular指令，并在必要时添加无效类：

---

div class=“mdl textfield”mdl validator=“form.email.$error”

您能添加一些

标记吗？您如何显示验证？使用
ng messages
或使用
ng show
显示和隐藏
div
s。这听起来不像是正常的行为，但如果没有代码示例，很难知道为什么会发生这种情况或提供替代方法。是的，我考虑过这种方法。但是我的情况有点复杂，因为我的代码与material.js混合在一起。如果用户只是在字段中进行标记，那么这将不起作用，因为只有在修改控件的模型时才分配$dirty。
<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>