Jaka jest różnica między ng-pristine a ng-dirty w AngularJS?

Jakie są różnice między ng-pristinei ng-dirty? Wygląda na to, że możesz mieć jedno i drugie true:

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

ng-dirtyKlasy mówi, że formularz został zmodyfikowany przez użytkownika, natomiast ng-pristineklasa mówi, że formularz nie został zmodyfikowany przez użytkownika. Tak ng-dirtyi ng-pristineto dwie strony tej samej historii.

Klasy są ustawiane w dowolnym polu, podczas gdy formularz ma dwie właściwości $dirtyi$pristine .

Możesz użyć tej $scope.form.$setPristine()funkcji, aby zresetować formularz do stanu pierwotnego (pamiętaj, że jest to funkcja AngularJS 1.1.x).

Jeśli chcesz uzyskać $scope.form.$setPristine()-ish zachowanie nawet w gałęzi 1.0.x AngularJS, musisz wprowadzić własne rozwiązanie (kilka całkiem dobrych można znaleźć tutaj ). Zasadniczo oznacza to iterację po wszystkich polach formularza i ustawienie ich $dirtyflagi na false.

Mam nadzieję że to pomoże.

pristine mówi nam, czy pole jest nadal dziewicze, a dirty mówi nam, czy użytkownik już wpisał cokolwiek w powiązanym polu:

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

Pole, które zarejestrowało jedno zdarzenie keydown, nie jest już dziewicze (nie jest bardziej dziewicze) i dlatego jest brudne na zawsze.

Obie dyrektywy oczywiście służą temu samemu celowi i chociaż wydaje się, że decyzja zespołu kątowego o uwzględnieniu obu koliduje z zasadą DRY i zwiększa ładunek strony, nadal jest raczej praktyczne, aby mieć je obie w pobliżu. Łatwiej jest stylizować elementy wejściowe, ponieważ w plikach css dostępne są zarówno pliki .ng-pristine, jak i .ng-dirty. Myślę, że był to główny powód dodania obu dyrektyw.

Jak już wspomniano we wcześniejszych odpowiedziach, ng-pristinesłuży do wskazywania, że ​​pole nie zostało zmodyfikowane, natomiast ng-dirtysłuży do informowania, że ​​zostało zmodyfikowane. Dlaczego potrzebujesz obu?

Powiedzmy, że mamy formularz z numerem telefonu i adresem e-mail wśród pól. Wymagany jest telefon lub e-mail, a także musisz powiadomić użytkownika, gdy ma nieprawidłowe dane w każdym polu. Można to osiągnąć za pomocą ng-dirtyi ng-pristinerazem:

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

Boolean True, jeśli formularz / dane wejściowe nie zostały jeszcze użyte ( nie zostały zmodyfikowane przez użytkownika )

ng-dirty ($ dirty)

Boolean True, jeśli formularz / dane wejściowe zostały użyte ( zmodyfikowane przez użytkownika )

$ setDirty (); Ustawia formularz na brudny stan. Tę metodę można wywołać, aby dodać klasę „ng-dirty” i ustawić formularz na stan brudny (klasa ng-dirty). Ta metoda przeniesie aktualny stan do formularzy nadrzędnych.

$ setPristine (); Ustawia formę na jej pierwotny stan. Ta metoda ustawia stan $ pristine formularza na true, stan $ dirty na false, usuwa klasę ng-dirty i dodaje klasę ng-pristine. Dodatkowo ustawia stan $ przesłany na fałsz. Ta metoda będzie również propagowana do wszystkich kontrolek zawartych w tym formularzu.

Przywracanie formularza do pierwotnego stanu jest często przydatne, gdy chcemy ponownie użyć formularza po zapisaniu lub zresetowaniu.