Dans AngularJS, quelle est la différence entre ng-pristine et ng-dirty?

Quelles sont les différences entre ng-pristineet ng-dirty? Il semble que vous pouvez avoir les deux pour être true:

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

La ng-dirtyclasse vous indique que le formulaire a été modifié par l'utilisateur, alors que la ng-pristineclasse vous indique que le formulaire n'a pas été modifié par l'utilisateur. Donc ng-dirtyet ng-pristinesont deux côtés de la même histoire.

Les classes sont définies sur n'importe quel champ, tandis que le formulaire a deux propriétés, $dirtyet$pristine .

Vous pouvez utiliser la $scope.form.$setPristine()fonction pour réinitialiser un formulaire à l'état vierge (veuillez noter qu'il s'agit d'une fonctionnalité AngularJS 1.1.x).

Si vous voulez un $scope.form.$setPristine()comportement -ish même dans la branche 1.0.x d'AngularJS, vous devez lancer votre propre solution (quelques très bonnes peuvent être trouvées ici ). Fondamentalement, cela signifie itérer sur tous les champs de formulaire et définir leur $dirtyindicateur sur false.

J'espère que cela t'aides.

pristine nous dit si un champ est encore vierge, et dirty nous indique si l'utilisateur a déjà tapé quelque chose dans le champ associé:

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

Un champ qui a enregistré un seul événement keydown n'est plus vierge (plus vierge) et est donc sale à jamais.

Les deux directives servent évidemment le même objectif, et bien qu'il semble que la décision de l'équipe angulaire d'inclure les deux interfère avec le principe DRY et ajoute à la charge utile de la page, il est toujours plutôt pratique de les avoir tous les deux. Il est plus facile de styliser vos éléments d'entrée car vous avez à la fois .ng-pristine et .ng-dirty disponibles pour le style dans vos fichiers css. J'imagine que c'était la principale raison pour laquelle les deux directives ont été ajoutées.

Comme déjà indiqué dans les réponses précédentes, ng-pristineest pour indiquer que le champ n'a pas été modifié, alors que ng-dirtypour indiquer qu'il a été modifié. Pourquoi avoir besoin des deux?

Disons que nous avons un formulaire avec le téléphone et l'adresse e-mail parmi les champs. Un téléphone ou un e-mail est requis, et vous devez également informer l'utilisateur lorsqu'il a des données non valides dans chaque champ. Cela peut être accompli en utilisant ng-dirtyet ng-pristineensemble:

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

Boolean True si le formulaire / l'entrée n'a pas encore été utilisé ( non modifié par l'utilisateur )

ng-sale ($ sale)

Boolean True si le formulaire / l'entrée a été utilisé ( modifié par l'utilisateur )

$ setDirty (); Définit le formulaire sur un état sale. Cette méthode peut être appelée pour ajouter la classe 'ng-dirty' et définir le formulaire sur un état sale (classe ng-dirty). Cette méthode propagera l'état actuel aux formulaires parents.

$ setPristine (); Définit le formulaire dans son état d'origine. Cette méthode définit l'état $ pristine du formulaire sur true, l'état $ dirty sur false, supprime la classe ng-dirty et ajoute la classe ng-pristine. De plus, il définit l'état $ soumis sur false. Cette méthode se propagera également à tous les contrôles contenus dans ce formulaire.

La remise en état d'un formulaire dans un état impeccable est souvent utile lorsque nous voulons «réutiliser» un formulaire après l'avoir enregistré ou réinitialisé.