在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功能).

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

希望这可以帮助.

Answer 2

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

<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事件的字段不再是处女(不再是原始的),因此永远是脏的.

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>