在angularjs中强制ng-dirty形成验证

时间:2013-08-19 23:41:12

标签: javascript angularjs

使用angularjs进行表单验证我想在用户点击提交时将所有必填字段标记为错误。

我正在使用input.ng-dirty.ng-invalid来设置错误的控件样式。所以我想要的是在用户提交表单时在所需的控件(或所有控件......对我来说都是一样的)上设置ng-dirty。

验证工作正常。我理解为什么,我正在尝试的可能是错的,但我找不到其他方法来做同样的效果,除了我认为太复杂而不正确的事情。

我尝试的是:

<div ng-app>
    <form novalidate>
        <input name="formvalue" type="text" ng-model="formvalue" required />
        <input type="submit" />
    </form>
</div>

http://jsfiddle.net/yq4NG/

1 个答案:

答案 0 :(得分:8)

让我们首先在jsfiddle中添加角度,将其包装在

<div ng-app>...</div>

http://jsfiddle.net/yq4NG/1/

默认情况下,将在输入(脏)上验证必填字段。如果你想在任何输入(pristine)之前在提交时验证它们,那么你可以在你的提交按钮上运行一个函数来检查原始字段并弄脏它们。

这就是我在示例中所做的:http://jsfiddle.net/yq4NG/6/

您可以使用自定义格式化程序和验证程序构建可重用的解决方案,但这是一个简单的开启解决方案。

编辑:

再次使用类更简单:http://jsfiddle.net/yq4NG/8/

编辑[正如@XMLilley在评论中所建议的那样]:

因为angular不提供等同于$setDirty()的{​​{1}}方法,我们只需使用{{1}的内容更新$ viewValue即触发$setPristine()状态}。它没有任何改变,但模拟用户手动输入每个$dirty字段并使用该值搞乱而不改变任何内容。