Question

我有一个html表单，我正在使用angular js为每个输入添加验证。

但是我不希望在加载html时最初显示验证错误，直到用户在表单中进行一些更改。

所以我的确认如下：

<form name="addApplicationForm" accept-charset="UTF-8" novalidate>
    <input type="text" name="name" ng-model="applicationData.application_name" required>
    <div ng-show="addApplicationForm.name.$invalid && !addApplicationForm.name.$pristine">
      <span class="error" ng-show="addApplicationForm.name.$error.required">Please enter application name.</span>
    </div>
    <button ng-click="submit()">Submit</button>
</form>

这个表格按照我的预期运作。现在，如果用户直接单击提交按钮而不对输入进行任何更改，则$ pristine状态仍为true，现在显示错误。但在这里，我想向用户显示验证错误。

这就是为什么在提交时，我想将表单的$ pristine状态设置为false，但我没有看到它的方法。

我也尝试使用$ dirty代替$ pristine，如：

<form name="addApplicationForm" accept-charset="UTF-8" novalidate>
    <input type="text" name="name" ng-model="applicationData.application_name" required>
    <div ng-show="addApplicationForm.name.$invalid && !addApplicationForm.name.$dirty">
      <span class="error" ng-show="addApplicationForm.name.$error.required">Please enter application name.</span>
    </div>
    <button ng-click="submit()">Submit</button>
</form>

在提交时，我只是调用setDirty方法使表单变脏，因此它会在提交按钮单击时显示错误。

但问题是，我在表单中也有一个重置按钮。点击后，我想清除表单的所有字段，然后我需要将表单的脏标志设置为false，但我没有任何这样的选项。但是对于这种情况，如果我使用$ pristine我有$ setPristine（）。

所以在这种情况下无论我使用$ dirty还是$ pristine，我都有一个问题。

请告诉我可能是什么解决方案。

Answer 1

$ pristine和$ dirty应该一起工作。使用$setPristine会将格式的$pristine属性设置为true，将$dirty设置为false。 $setDirty会做相反的事情。

您的问题似乎与您正在测试表单字段的$pristine和$dirty属性这一事实有关（请参阅https://docs.angularjs.org/api/ng/type/ngModel.NgModelController）。在表单控制器上执行$setPristine也会传播到表单的每个字段，而$setDirty则不会。{/ p>
您可以查看设置属性的角度源代码（#setPristine和#setDirty），此代码部分明确且易于阅读：https://github.com/angular/angular.js/blob/master/src/ng/directive/form.js

Answer 2

在这种特定情况下，您无需将form设置为任何内容。

您只需将支票更改为：

<div ng-show="addApplicationForm.name.$invalid && addApplicationForm.name.$dirty">

我建议您使用this指令。

另请检查此tutorial。

Angular js将形式设置为Pristine false

2 个答案: