在 angularjs 表单验证中强制 ng-dirty答案

【问题标题】：Force ng-dirty in angularjs form validation在 angularjs 表单验证中强制 ng-dirty
【发布时间】：2013-08-19 23:41:11
【问题描述】：

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

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

让我们首先通过将 Angular 包装在 jsfiddle 中来添加它

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

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

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

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

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

编辑：

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

编辑[正如@XMLilley 在 cmets 中所建议的]：

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

【讨论】：

感谢您的解决方案。我忘了保存小提琴，这就是为什么我错过了 ng-app。但这是我试图避免的那种复杂的解决方案。我缺少的东西不是内置的吗？我不敢相信这是一种罕见的极端情况。（为控件分配相同的值只是为了显示验证，似乎有点尴尬）
角度验证是关于到位和即时响应的。与服务器端验证不同。必填字段已验证。如果设置了必需的属性但未填写，则表单将不会提交，由类“ng-invalid-required”指出。但是这些字段并不脏，因为它们没有被改变。
@Fernando 我已经用另一种解决方案更新了我的答案，您可能会发现它更适合您的需求。如果这不是您正在寻找的解决方案，请告诉我。如果是，请将其标记为答案。
塔恩克斯马修！它好多了，我会使用你的解决方案，但我不能停止觉得它应该由 angular 几乎自动处理。（正如 jquery 验证所做的那样）。非常感谢您的时间、耐心和奉献精神:)
对于任何在@Matthew.Lothian 的非常有用的答案上寻找底线的人：因为 Angular 没有提供等同于$setPristine() 的$setDirty() 方法，所以您正在触发@987654332 @state 通过简单地用$modelValue 的内容更新$viewValue。它没有任何改变，而是模拟用户手动输入每个$pristine 字段并在不更改任何内容的情况下乱搞值。（请随意窃取此解释并添加到您的答案中。）简单有效。 Angular 没有提供更好的选择。