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

La classe ng-dirty vous indique que le formulaire a été modifié par l’utilisateur, alors que la classe ng-pristine vous indique que le formulaire n’a pas été modifié par l’utilisateur. Donc, ng-dirty et ng-pristine sont les deux faces d’une même histoire.

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

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

Si vous voulez un $scope.form.$setPristine() -ish même dans la twig 1.0.x d’AngularJS, vous devez déployer votre propre solution (vous en trouverez quelques-unes ici ). Fondamentalement, cela signifie une itération sur tous les champs de formulaire et la définition de leur indicateur $dirty sur false .

J’espère que cela t’aides.

Pristine nous indique si un champ est toujours vierge et que dirty indique si l’utilisateur a déjà tapé quelque chose dans le champ associé:

  
  
 Email is virgine. 
 
 E-mail is dirty 
  

Les deux directives servent évidemment le même objective, et bien qu’il semble que la décision de l’équipe angular d’inclure les deux interfère avec le principe DRY et augmente la charge utile de la page, il est quand même assez pratique de les avoir toutes les deux. Il est plus facile de styliser vos éléments d’entrée car vous avez à la fois le style .ng-pristine et le fichier .ng-dirty disponibles dans vos fichiers CSS. Je suppose que c’était la principale raison pour append les deux directives.

Comme déjà indiqué dans les réponses précédentes, ng-pristine indique que le champ n’a pas été modifié, alors que ng-dirty sert à 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. Le téléphone ou l’e-mail est requirejs, et vous devez également informer l’utilisateur de la présence de données non valides dans chaque champ. Cela peut être accompli en utilisant ng-dirty et ng-pristine ensemble:

 
  
Phone or e-mail required
 
 E-mail is invalid 
  
Phone or e-mail required
 
 Phone is invalid 
  

ng-pristine ($ pristine)

Booléen Vrai si le formulaire / entrée n’a pas encore été utilisé ( non modifié par l’utilisateur )

ng-dirty ($ dirty)

Booléen Vrai si le formulaire / entrée a été utilisé ( modifié par l’utilisateur )

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

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

La remise d’un formulaire à un état vierge est souvent utile lorsque vous souhaitez «réutiliser» un formulaire après l’avoir enregistré ou réinitialisé.