javascript - 在angularjs表单验证中强制使用ng-dirty

Question

使用 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/

Answer 1

让我们开始将 angular 添加到您的 jsfiddle 中，将其包装在

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

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

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

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

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

编辑:

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

编辑[按照@XMLilley 在评论中的建议]:

因为 angular 没有提供等同于 $setPristine() 的 $setDirty() 方法，我们触发了 $dirty通过简单地用 $modelValue 的内容更新 $viewValue 来状态。它没有任何改变，而是模拟用户手动输入每个 $pristine 字段并在不改变任何东西的情况下随意修改值。