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?

angularjs

— 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

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