更新

Question

我在表单中添加了“required”和“pattern”等字段验证属性，表单在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>

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

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

Answer 1

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

Click here for live demo.

Answer 2

目前实施的是什么（错误的恕我直言）是MDL自动验证输入并且不介意＆＃34; novalidate＆＃34;表单属性。我必须实现检查空输入值（跳过验证并删除无效类），因为角形式验证需要＆＃34; novalidate＆＃34;属性，检查：

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

通过这种方式，您可以实际关闭mdl验证并将所有内容保留为有角度。实际上还需要一件事。您可以创建用于验证表达式的angular指令，并在必要时添加is-invalid类：

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

AngularJS - 在加载时触发表单验证

更新

2 个答案: