AngularJS - różnica między nieskazitelnym / brudnym i dotkniętym / nietkniętym

158

Podręcznik programisty AngularJS - formularze informują, że istnieje wiele stylów i dyrektyw dotyczących formularzy i pól. Dla każdej klasy CSS:

ng-valid
ng-invalid
ng-pristine
ng-dirty
ng-touched
ng-untouched

Jaka jest różnica między pristine/dirtyi touched/untouched?

Luis Masuelli
źródło
3
Jest to teraz w dokumentacji, do której utworzyłeś łącze, pod nagłówkiem „Korzystanie z klas CSS”.
Bernhard Hofmann
1
Masz rację :) Chociaż wydaje się trochę nowy (obok nowych klas, które definiuje)
Luis Masuelli

Odpowiedzi:

220

Podręcznik programisty AngularJS - klasy CSS używane przez AngularJS

  • @property {boolean} $ untouched Prawda, jeśli kontrola nie straciła jeszcze ostrości.
  • @property {boolean} $ dotknął Prawda, jeśli kontrola straciła ostrość.
  • @property {boolean} $ pristine Prawda, jeśli użytkownik nie wszedł jeszcze w interakcję z kontrolką.
  • @property {boolean} $ dirty Prawda, jeśli użytkownik już wchodził w interakcję z kontrolką.
Yuriy Rozhovetskiy
źródło
89

$pristine/ $dirtyinformuje, czy użytkownik faktycznie coś zmienił , natomiast $touched/ $untouchedinformuje, czy użytkownik tylko tam był / odwiedził .

Jest to naprawdę przydatne do walidacji. Powodem $dirtybyło zawsze unikanie wyświetlania odpowiedzi walidacyjnych, dopóki użytkownik faktycznie nie odwiedził określonej kontroli. Jednak korzystając tylko z $dirtywłaściwości, użytkownik nie otrzyma informacji zwrotnej o walidacji, chyba że faktycznie zmienił wartość. Tak więc $invalidpole nadal nie wyświetlałoby użytkownikowi monitu, gdyby użytkownik nie zmienił / nie wchodził w interakcję z wartością. Jeśli użytkownik całkowicie zignorował wymagane pole, wszystko wyglądało dobrze.

Dzięki Angular 1.3 i ng-touchedmożesz teraz ustawić określony styl na kontrolce, gdy tylko użytkownik się zamazał, niezależnie od tego, czy faktycznie edytował wartość, czy nie.

Oto CodePen, który pokazuje różnicę w zachowaniu.

XML
źródło
Szukam sposobu, aby usunąć błędy walidacji formularza. form. $ setPristine tego nie robi. Widziałem sugestie innych osób. $ SetUntouched, ale wygląda na to, że nie jest dostępne w wersji kątowej 1.3 19 beta, która jest wersją, której używam. Mogę jednak zadzwonić do form.field_name. $ SetUntouched, ale zrobienie tego dla wszystkich pól jest uciążliwe, czy jest lepszy sposób?
T. Rex
$setPristinepo prostu sprawia, że ​​forma jest nie- $dirty. Myślę, że możesz chcieć form.setValidity(). Zobacz kilka pomocnych odpowiedzi w tym poście .
XML
14

W książce Pro Angular-6 jest szczegółowo opisane poniżej;

  • valid : Ta właściwość zwraca wartość true, jeśli zawartość elementu jest poprawna, lub false, jeśli jest inaczej.
  • nieprawidłowy : ta właściwość zwraca wartość true, jeśli zawartość elementu jest nieprawidłowa, lub false, jeśli jest inaczej.

  • pristine : ta właściwość zwraca wartość true, jeśli zawartość elementu nie została zmieniona.

  • dirty : ta właściwość zwraca wartość true, jeśli zawartość elementu została zmieniona .
  • nietknięte : ta właściwość zwraca wartość true, jeśli użytkownik nie odwiedził elementu.
  • touchched : ta właściwość zwraca wartość true, jeśli użytkownik odwiedził element.
fgul
źródło
6

Warto wspomnieć, że właściwości walidacji są różne dla formularzy i elementów formularzy (zauważ, że dotknięte i nietknięte dotyczą tylko pól):

Input fields have the following states:

$untouched The field has not been touched yet
$touched The field has been touched
$pristine The field has not been modified yet
$dirty The field has been modified
$invalid The field content is not valid
$valid The field content is valid

They are all properties of the input field, and are either true or false.

Forms have the following states:

$pristine No fields have been modified yet
$dirty One or more have been modified
$invalid The form content is not valid
$valid The form content is valid
$submitted The form is submitted

They are all properties of the form, and are either true or false.
Yvonne Aburrow
źródło