In AngularJS, what's the difference between ng-pristine and ng-dirty?

Question

What is the difference between ng-pristine and ng-dirty ? It seems you could be as true :

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

Answer 1

The ng-dirty class tells you that the form has been changed by the user, while the ng-pristine class tells you that the form has not been changed by the user. So, ng-dirty and ng-pristine are two sides of the same story.

Classes are defined in any field, and the form has two properties: $dirty and $pristine .

You can use the $scope.form.$setPristine() function to reset the form to its original state (note that this is an AngularJS 1.1.x function).

If you want the behavior of $scope.form.$setPristine() -ish even in the 1.0.x AngularJS branch, you need to roll your own solution (you can find some pretty good ones here ). This basically means that it iterates over all fields of the form and sets the $dirty flag to false .

Hope this helps.

Answer 2

pristine tells us that the field is still virgin, and dirty tells us that the user has already typed something in the corresponding field:

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

A field that logs one keydown event is no more virgin (no more clean) and therefore dirty forever.

Answer 3

Both directives obviously serve the same purpose, and although it seems that the angular command's decision to include interference with the DRY principle also adds to the page payload, it's pretty practical to have them all around. It’s easier to style input elements, since you have both .ng-pristine and .ng-dirty available for styling in your css files. I guess that was the main reason for adding both directives.

Answer 4

As mentioned in previous answers, ng-pristine means that the field has not been changed, while ng-dirty means that it has been changed. Why do you need both?

Let's say we have a form with a phone and an email address among the fields. Either phone or email is required, and you must notify the user when they have invalid data in each field. This can be done using ng-dirty and ng-pristine together:

 <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 ($ net)

Boolean True if the form / input is not yet in use ( not modified by the user )

ng-dirty ($ dirty)

Boolean True if using form / input ( user modified )

---

$ SetDirty (); Sets the mold into a dirty state. This method can be called to add the "ng-dirty" class and set the form to a dirty state (ng-dirty class). This method will propagate the current state to parent forms.

$ setPristine (); Sets the form to its pristine state. This method sets the form of $ pristine state to true, the state of $ dirty is false, removes the ng-dirty class and adds the ng-pristine class. In addition, it sets the $ submit parameter to false. This method will also apply to all controls contained in this form.

Setting the form back to its pristine state is often useful when we want to “reuse” the form after saving or resetting it.