在AngularJS中,ng-pristine和ng-dirty有什么区别?

gzszwxb4  于 2022-12-26  发布在  Angular
关注(0)|答案(5)|浏览(159)

ng-pristineng-dirty有什么区别?看起来你可以同时成为true

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

fv2wmkja1#

ng-dirty类告诉您表单已被用户修改,而ng-pristine类告诉您表单未被用户修改,因此ng-dirtyng-pristine是同一个故事的两个方面。
这些类可以在任何字段上设置,而表单有两个属性,$dirty$pristine
您可以使用$scope.form.$setPristine()函数将表单重置为原始状态(请注意,这是AngularJS 1.1.x的特性)。
即使在AngularJS的1.0.x分支中,如果你想要一个$scope.form.$setPristine()-ish行为,你需要自己的解决方案(可以找到一些相当好的解决方案**here**),基本上,这意味着迭代所有表单字段,并将它们的$dirty标志设置为false

zsohkypk

zsohkypk2#

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>

一个已经注册了一个按键事件的字段不再是原始的(不再是原始的),因此永远是脏的。

wwtsj6pe

wwtsj6pe3#

这两个指令显然服务于相同的目的,虽然看起来Angular 团队的决定,包括两个干扰干原则,并增加了页面的有效负载,同时拥有这两种元素仍然是非常实用的,因为在css文件中有.ng-pristine和.ng-dirty可用于样式化,所以样式化输入元素更加容易。我想这是添加这两个指令的主要原因。

mitkmikd

mitkmikd4#

正如前面的答案所述,ng-pristine用于指示字段未被修改,而ng-dirty用于告知字段已被修改,为什么两者都需要?
假设我们有一个表单,表单的字段中包含电话和电子邮件地址,电话或电子邮件地址都是必需的,并且当用户在每个字段中得到无效数据时,您还必须通知用户,这可以通过同时使用ng-dirtyng-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>
wixjitnu

wixjitnu5#

ng-原始*($原始)*

如果表单/输入尚未使用(未被用户修改),则为True

ng-dirty*($脏数据)*

如果表单/输入已被使用(由用户修改),则为True

**$设置脏();**将窗体设置为脏状态。可以调用此方法添加“ng-dirty”类并将窗体设置为脏状态(ng-dirty类)。此方法将当前状态传播到父窗体。
**$设置原始();**将窗体设置为其原始状态。此方法将窗体的$pristine状态设置为true,将$dirty状态设置为false,删除ng-dirty类并添加ng-pristine类。此外,它将$submitted状态设置为false。此方法还将传播到此窗体中包含的所有控件。

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

相关问题