113

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

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

5 回答 5

217

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

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

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

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

希望这可以帮助。

于 2013-08-06T06:44:42.110 回答
41

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 事件的字段不再是原始的（不再是原始的），因此永远是脏的。

于 2015-02-03T23:11:47.633 回答
34

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

于 2013-11-10T20:07:23.037 回答
10

正如在前面的答案中已经说过的，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>
于 2014-03-07T08:55:21.067 回答
1

ng-原始 （$原始）

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

ng-脏 （$脏）

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

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

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

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

于 2017-09-25T10:18:36.457 回答