在 AngularJS 中，ng-pristine 和 ng-dirty 有什么区别？

Question

ng-pristine 和 ng-dirty 有什么区别？看来你可以同时成为true：

$scope.myForm.$pristine = true; // after editing the form

Answer 1

ng-dirty 类告诉您表单已被用户修改，而ng-pristine 类告诉您表单尚未被用户修改。所以ng-dirty 和ng-pristine 是同一个故事的两个方面。

类设置在任何字段上，而表单有两个属性，$dirty 和 $pristine。

您可以使用$scope.form.$setPristine() 函数将表单重置为原始状态（请注意，这是 AngularJS 1.1.x 的一项功能）。

如果即使在 AngularJS 的 1.0.x 分支中也想要 $scope.form.$setPristine()-ish 行为，您需要推出自己的解决方案（可以找到一些非常好的解决方案 here）。基本上，这意味着遍历所有表单字段并将其$dirty 标志设置为false。

希望这会有所帮助。

Answer 2

这两个指令显然服务于相同的目的，尽管 Angular 团队决定同时包含这两个指令似乎会干扰 DRY 原则并增加页面的有效负载，但同时使用它们仍然是相当实用的。由于 .ng-pristine 和 .ng-dirty 都可用于在 css 文件中进行样式设置，因此设置输入元素的样式会更容易。我想这是添加这两个指令的主要原因。

Answer 3

ng-pristine ($pristine)

Boolean 如果尚未使用表单/输入则为 True（用户未修改）

ng-dirty ($dirty)

Boolean 如果表单/输入已被使用（由用户修改），则为 True

---

$setDirty(); 将表单设置为脏状态。 可以调用此方法来添加“ng-dirty”类并将表单设置为脏状态（ng-dirty 类）。此方法会将当前状态传播到父表单。

$setPristine(); 将表单设置为其原始状态。 此方法将表单的 $pristine 状态设置为 true，将 $dirty 状态设置为 false，删除 ng-dirty 类并添加 ng-pristine 类。此外，它将 $submitted 状态设置为 false。 此方法还将传播到此表单中包含的所有控件。

当我们想在保存或重置表单后“重复使用”表单时，将表单设置回原始状态通常很有用。

Answer 4

正如之前的答案中已经说过的，ng-pristine 用于表示该字段尚未被修改，而ng-dirty 用于表示它已被修改。为什么两者都需要？

假设我们有一个在字段中包含电话和电子邮件地址的表单。需要电话或电子邮件，并且当用户在每个字段中获得无效数据时，您还必须通知用户。这可以通过同时使用ng-dirty 和ng-pristine 来实现：

<form name="myForm">
    <input name="email" ng-model="data.email" ng-required="!data.phone">
    <div class="error" 
         ng-show="myForm.email.$invalid && 
                  myForm.email.$pristine &&
                  myForm.phone.$pristine">Phone or e-mail required</div>
    <div class="error" 
         ng-show="myForm.email.$invalid && myForm.email.$dirty">
        E-mail is invalid
    </div>

    <input name="phone" ng-model="data.phone" ng-required="!data.email">
    <div class="error" 
         ng-show="myForm.phone.$invalid && 
                  myForm.email.$pristine &&
                  myForm.phone.$pristine">Phone or e-mail required</div>
    <div class="error" 
         ng-show="myForm.phone.$invalid && myForm.phone.$dirty">
        Phone is invalid
    </div>
</form>

Answer 5

pristine 告诉我们一个字段是否仍然是处女，dirty 告诉我们用户是否已经在相关字段中输入了任何内容：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<form ng-app="" name="myForm">
  <input name="email" ng-model="data.email">
  <div class="info" ng-show="myForm.email.$pristine">
    Email is virgine.
  </div>
  <div class="error" ng-show="myForm.email.$dirty">
    E-mail is dirty
  </div>
</form>

已注册单个 keydown 事件的字段不再是原始的（不再是原始的），因此永远是脏的。