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

我尝试在表单中添加“novalidation”属性，如AngularJS网站上的示例所示，但没有运气。

我想验证触发用户第一次尝试与它进行交互。我怎样才能做到这一点？

更新

下面是一个例子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>

上的负载，你会看到所有的输入字段有下他们红线这表明它们在无效状态。一旦验证，该线就会变成蓝色。

注：在检查按钮的风格不工作...不应该在这个问题值得关注。

来源

2015-10-21 davidshen84

请你加些'markup'？你如何显示验证？使用'ng-messages'或使用'ng-show'显示和隐藏'div's ..？ –

这听起来不像正常的行为，但没有你的代码样本，很难知道为什么会发生这种情况或提供替代方案。 – Claies

什么是目前实施的（错误恕我直言）是MDL自动验证输入，并且不介意“的novalidate”的形式属性。我不得不实施检查空输入值（跳过验证和删除是-无效类），而且由于角度表单验证要求“的novalidate”属性，检查：

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

这样你实际上可以关闭MDL验证并保持一切。还有一件事实际上是必需的。您可以创建角指令，它验证表达，如果需要补充的是，无效类：

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

来源

2015-10-22 11:12:27 dgrubelic

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

Click here for live demo.

来源

2015-10-21 02:37:30 m59

是的，我想过这种方法。但是我的情况稍微复杂一点，因为我的代码与material.js – davidshen84

混合在一起，如果用户只是简单地标记字段，那么$ dirty只会在控件模型被修改时才会被分配，这是行不通的。 – nick

加载时触发的角度表单验证

更新

回答

相关问题