Angularjs, différence entre ng-primitive et ng-dirty

Question

Quelles sont les différences entre ng-pristine et ng-dirty? Il semble que vous puissiez avoir les deux vrais.

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

Answer 1

L' ng-dirty classe vous dit que le formulaire a été modifié par l'utilisateur, tandis que l' ng-pristine classe vous dit que le formulaire n'a pas été modifiés par l'utilisateur. Donc, ng-dirty et ng-pristine sont les deux faces de la même histoire.

Les classes sont définies sur un champ, tandis que le formulaire est composé de deux propriétés, $dirty et $pristine.

Vous pouvez utiliser l' $scope.form.$setPristine() fonction pour réinitialiser un formulaire à l'état initial (veuillez noter que ceci est un AngularJS 1.1.la fonctionnalité x).

Si vous voulez un $scope.form.$setPristine()-ish comportement même de la version 1.0.x branche d'AngularJS, vous avez besoin de déployer votre propre solution (de quelques très bons peuvent être trouvés ici). Fondamentalement, cela signifie une itération sur tous les champs de formulaire et l'établissement de leurs $dirty le drapeau en false.

Espérons que cette aide.

Answer 2

Les deux directives ont é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 pratique de les avoir toutes les deux. Il est plus facile de styliser vos éléments d’entrée car vous avez à la fois des fichiers .ng-primate et .ng-dirty disponibles pour le style dans vos fichiers CSS. J'imagine que c'était la raison principale pour ajouter les deux directives.

Answer 3

Comme déjà dit dans les réponses précédentes, ng-pristine est pour indiquer que le champ n'a pas été modifié, alors que ng-dirty est pour dire qu'il a été modifié. Pourquoi faut-il deux?

Disons que nous avons un formulaire avec téléphone et e-mail parmi les champs. Soit par téléphone ou par e-mail est nécessaire, et vous devez également avertir l'utilisateur quand ils l'ont obtenu des données non valides dans chaque champ. Ceci peut être accompli en utilisant ng-dirty et ng-pristine ensemble:

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