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

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

＆＃13;

<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>

＆＃13;

已注册单个keydown事件的字段不再是处女（不再是纯净的），因此永远是脏的。

Answer 3

这两个指令显然都有同样的目的，虽然看起来角度团队决定既包括干扰DRY原则又增加了页面的有效负载，但将它们放在一起仍然是相当实际的。您可以更轻松地设置输入元素的样式，因为您可以在.cn文件中使用.ng-pristine和.ng-dirty进行样式设置。我想这是添加两个指令的主要原因。

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

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。此方法还将传播到此表单中包含的所有控件。

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

在AngularJS中，ng-pristine和ng-dirty之间的区别是什么？

5 个答案: