AngularJS - differenza tra incontaminato / sporco e toccato / non toccato

158

Guida per gli sviluppatori di AngularJS - I moduli indicano che esistono molti stili e direttive relativi a moduli e campi. Per ognuno una classe CSS:

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

Qual è la differenza tra pristine/dirtye touched/untouched?

angularjs

— Luis Masuelli
fonte

3

Questo è ora nella documentazione a cui ti sei collegato, sotto l'intestazione "Uso delle classi CSS".

— Bernhard Hofmann,

1

Hai ragione :) Anche se sembra un po 'nuovo (accanto alle nuove classi che definisce)

— Luis Masuelli,

220

Guida per gli sviluppatori di AngularJS - Classi CSS utilizzate da AngularJS

@property {boolean} $ intoccato Vero se il controllo non ha ancora perso la concentrazione.

@property {boolean} $ ha toccato True se il controllo ha perso la concentrazione.

@property {boolean} $ pristine Vero se l'utente non ha ancora interagito con il controllo.

@property {boolean} $ dirty Vero se l'utente ha già interagito con il controllo.

— Yuriy Rozhovetskiy
fonte

89

$pristine/ $dirtyti dice se l'utente ha effettivamente cambiato qualcosa, mentre $touched/ $untouchedti dice se l'utente è semplicemente stato / visitato .

Questo è davvero utile per la validazione. Il motivo $dirtyera sempre quello di evitare di mostrare le risposte di convalida fino a quando l'utente non ha effettivamente visitato un certo controllo. Tuttavia, utilizzando solo la $dirtyproprietà, l'utente non otterrebbe un feedback di convalida se non modificasse effettivamente il valore. Pertanto, un $invalidcampo non mostrerebbe all'utente un prompt se l'utente non ha modificato / interagito con il valore. Se l'utente ha ignorato completamente un campo obbligatorio, tutto sembra a posto.

Con Angular 1.3 e ng-touched, ora puoi impostare uno stile particolare su un controllo non appena l'utente ha sfocato, indipendentemente dal fatto che abbia effettivamente modificato il valore o meno.

Ecco una CodePen che mostra la differenza nel comportamento.

— XML
fonte

Sto cercando un modo per cancellare gli errori di convalida del modulo. form. $ setPristine non lo fa. Ho visto altri suggerimenti suggeriti. $ SetUntouched, ma sembra che questo non sia disponibile nella versione 1.3 19 beta angolare, che è la versione che sto usando. Posso comunque chiamare form.field_name. $ SetUntouched, ma farlo per tutti i campi è oneroso, c'è un modo migliore?

— T. Rex,

$setPristinerende semplicemente il modulo un- $dirty. Penso che potresti desiderare form.setValidity(). Vedi diverse risposte utili su questo post .

— XML

14

Nel libro Pro Angular-6 è dettagliato come di seguito;

valido : questa proprietà restituisce vero se il contenuto dell'elemento è valido e falso altrimenti.
invalid : questa proprietà restituisce true se il contenuto dell'elemento non è valido e false in caso contrario.
pristine : questa proprietà restituisce true se il contenuto dell'elemento non è stato modificato.
dirty : questa proprietà restituisce true se il contenuto dell'elemento è stato modificato .
intoccato : questa proprietà restituisce true se l'utente non ha visitato l'elemento.
toccato : questa proprietà restituisce true se l'utente ha visitato l'elemento.

— fgul
fonte

6

Vale la pena ricordare che le proprietà di convalida sono diverse per i moduli e gli elementi del modulo (notare che toccati e non toccati sono solo per i campi):

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
fonte