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

109

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

angularjs

— synergiczny
źródło

214

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.

— Golo Roden
źródło

2

Dobra odpowiedź, ale po co dwie klasy, skoro to dwie strony tej samej historii? Jak powiedziałem, oba mogą być prawdziwe lub fałszywe.

— synergiczny

6

Zgadza się, ale myślę (obawiam się), że jest to pytanie, na które mogą odpowiedzieć tylko programiści AngularJS. Innymi słowy: nie wiem.

— Golo Roden

2

@synergetic jest w zasadzie jak ng-show i ng-hide, jeden wystarczy, ale mamy dwa bez widocznego powodu

— Labib Ismaiel

1

@synergetic ng-show jest semantycznie łatwiejsze do zrozumienia i wymaga o jeden krok mniej poznawczego do zrozumienia niż! ng-hide. Twój mózg musi wykonać ten dodatkowy krok, a tym samym jest bardziej prawdopodobne, że wprowadzisz błędy

— Damian Green,

4

Myślę, że zależy to od twojego zamiaru: czasami chcesz pokazać dodatkowe rzeczy w określonej sytuacji, a czasami musisz ukryć pewne rzeczy w określonej sytuacji. W zależności od przypadku użycia oba mogą być odpowiednie. Oczywiście, chociaż technicznie jest to dokładnie to samo, celowo tak nie jest.

— Golo Roden

41

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>

Rozwiń fragment

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

— Meziane
źródło

Co powiesz na wklejenie za pomocą myszy?

— Mihai Răducanu

2

To niczego nie wyjaśnia. Pytanie brzmiało „jaka jest różnica”. Nie ma żadnego wyjaśnienia, co masz na myśli przez dziewicę, a co przez brudne.

— hogan

34

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.

— zszep
źródło

19

+1 za fakt .ng-pristinei .ng-dirtyzezwalaj na różne stylizacje CSS - wydaje się to najbardziej poprawnym powodem powtórzenia

— Steve Lorimer

10

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>

— sandst1
źródło

1

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.

— Dhyan Mohandas
źródło