在AngularJS中,ng-pristine和ng-dirty有什么区别?
ng-pristine
和ng-dirty
什么区别? 看来你们可以有两个是true
:
$scope.myForm.$pristine = true; // after editing the form
ng-dirty
类告诉你表单已被用户修改,而ng-pristine
类告诉你表单没有被用户修改。 因此ng-dirty
和ng-pristine
是同一故事的两面。
这些类是在任何字段上设置的,而表单有两个属性$dirty
和$pristine
。
您可以使用$scope.form.$setPristine()
函数将表单重置为pristine状态(请注意,这是一个AngularJS 1.1.xfunction)。
如果你想要一个$scope.form.$setPristine()
ish的行为,即使在AngularJS的1.0.x版本中,你也需要推出你自己的解决scheme(在这里可以find一些相当不错的解决scheme)。 基本上,这意味着迭代所有的表单字段,并将其$dirty
标志设置为false
。
希望这可以帮助。
原始的告诉我们,如果一个领域仍然是处女,并且肮脏告诉我们,如果用户已经在相关领域input了任何东西:
<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>
这两个指令显然都是为了达到同样的目的,虽然看起来angular色团队的决定既包括干涉DRY原则,也增加了页面的有效载荷,但是将它们放在一起还是相当实际的。 您的input元素的样式更容易,因为您的.ng-pristine和.ng-dirty可用于您的css文件中的样式。 我想这是添加两个指令的主要原因。
正如在前面的答案中所述, 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>
ng-pristine ($ pristine)
Boolean如果表单/input尚未使用( 用户未修改),则为True
ng-dirty ($ dirty)
Boolean如果表单/input已被使用( 由用户修改),则为True
$使用setDirty(); 将表单设置为脏状态。 可以调用此方法来添加“ng-dirty”类并将表单设置为脏状态(ng-dirty类)。 此方法将传播当前状态到父窗体。
$ setPristine(); 将表单设置为其原始状态。 此方法将表单的$ pristine状态设置为true,将$ dirty状态设置为false,删除ng-dirty类并添加ng-pristine类。 另外,它将$提交状态设置为false。 这个方法也会传播到这个表单中的所有控件。
当我们希望在保存或重置表单后重新使用表单时,将表单设置回原始状态通常很有用。