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

Question

What are the differences between ng-pristine and ng-dirty  It seems you can have both to be true    scope myForm  pristine   true     after editing the form

User · Answer

ng-pristine   pristine   Boolean True if the form input has not been used yet  not modified by the user   ng-dirty   dirty   Boolean True if the form input has been used  modified by the user      setDirty    Sets the form to 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 current state to parent forms    setPristine    Sets the form to its pristine state  This method sets the form s  pristine state to true  the  dirty state to false  removes the ng-dirty class and adds the ng-pristine class  Additionally  it sets the  submitted state to false  This method will also propagate to all the controls contained in this form   Setting a form back to a pristine state is often useful when we want to  reuse  a form after saving or resetting it

User · Answer

pristine tells us if a field is still virgin  and dirty tells us if the user has already typed anything in the related field    x000D   x000D   lt script src  https   ajax googleapis com ajax libs angularjs 1 0 8 angular min js  gt  lt  script gt  x000D   lt form ng-app    name  myForm  gt  x000D     lt input name  email  ng-model  data email  gt  x000D     lt div class  info  ng-show  myForm email  pristine  gt  x000D      Email is virgine  x000D     lt  div gt  x000D     lt div class  error  ng-show  myForm email  dirty  gt  x000D      E-mail is dirty x000D     lt  div gt  x000D   lt  form gt  x000D   x000D   x000D    A field that has registred a single keydown event is no more virgin  no more  pristine  and is therefore dirty for ever

User · Answer

As already stated in earlier answers  ng-pristine is for indicating that the field has not been modified  whereas ng-dirty is for telling it has been modified  Why need both   Let s say we ve got a form with phone and e-mail address among the fields  Either phone or e-mail is required  and you also have to notify the user when they ve got invalid data in each field  This can be accomplished by using ng-dirty and ng-pristine together    lt form name  myForm  gt       lt input name  email  ng-model  data email  ng-required   data phone  gt       lt div class  error            ng-show  myForm email  invalid  amp  amp                     myForm email  pristine  amp  amp                    myForm phone  pristine  gt Phone or e-mail required lt  div gt       lt div class  error            ng-show  myForm email  invalid  amp  amp  myForm email  dirty  gt          E-mail is invalid      lt  div gt        lt input name  phone  ng-model  data phone  ng-required   data email  gt       lt div class  error            ng-show  myForm phone  invalid  amp  amp                     myForm email  pristine  amp  amp                    myForm phone  pristine  gt Phone or e-mail required lt  div gt       lt div class  error            ng-show  myForm phone  invalid  amp  amp  myForm phone  dirty  gt          Phone is invalid      lt  div gt   lt  form gt

User · Answer

The ng-dirty class tells you that the form has been modified by the user  whereas the ng-pristine class tells you that the form has not been modified by the user  So ng-dirty and ng-pristine are two sides of the same story   The classes are set on any field  while the form has two properties   dirty and  pristine   You can use the  scope form  setPristine   function to reset a form to pristine state  please note that this is an AngularJS 1 1 x feature    If you want a  scope form  setPristine  -ish behavior even in 1 0 x branch of AngularJS  you need to roll your own solution  some pretty good ones can be found here   Basically  this means iterating over all form fields and setting their  dirty flag to false   Hope this helps

User · Answer

Both directives obviously serve the same purpose  and though it seems that the decision of the angular team to include both interfere with the DRY principle and adds to the payload of the page  it still is rather practical to have them both around  It is easier to style your input elements as you have both  ng-pristine and  ng-dirty available for styling in your css files  I guess this was the primary reason for adding both directives

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

Examples related to angularjs