AngularJS - Différence entre vierge / sale et touché / intact

158

Guide du développeur AngularJS - Les formulaires indiquent qu'il existe de nombreux styles et directives concernant les formulaires et les champs. Pour chacun, une classe CSS:

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

Quelle est la différence entre pristine/dirtyet touched/untouched?

angularjs

— Luis Masuelli
source

3

Ceci est maintenant dans la documentation à laquelle vous avez lié, sous la rubrique "Utilisation des classes CSS".

— Bernhard Hofmann

1

Vous avez raison :) Bien que cela semble un peu nouveau (à côté des nouvelles classes qu'il définit)

— Luis Masuelli

220

Guide du développeur AngularJS - Classes CSS utilisées par AngularJS

@property {boolean} $ untouched Vrai si le contrôle n'a pas encore perdu le focus.

@property {boolean} $ touched True si le contrôle a perdu le focus.

@property {boolean} $ pristine Vrai si l'utilisateur n'a pas encore interagi avec le contrôle.

@property {boolean} $ dirty True si l'utilisateur a déjà interagi avec le contrôle.

— Yuriy Rozhovetskiy
source

89

$pristine/ $dirtyvous indique si l'utilisateur a réellement changé quoi que ce soit, tandis que $touched/ $untouchedvous indique si l'utilisateur a simplement été là / visité .

C'est vraiment utile pour la validation. La raison $dirtyétait toujours d'éviter d'afficher les réponses de validation tant que l'utilisateur n'a pas réellement visité un certain contrôle. Mais, en utilisant uniquement la $dirtypropriété, l'utilisateur n'obtiendrait pas de retour de validation à moins qu'il ne modifie réellement la valeur. Ainsi, un $invalidchamp n'afficherait toujours pas une invite à l'utilisateur si l'utilisateur ne modifiait pas / n'interagissait pas avec la valeur. Si l'utilisateur a complètement ignoré un champ obligatoire, tout semblait OK.

Avec Angular 1.3 et ng-touched, vous pouvez désormais définir un style particulier sur un contrôle dès que l'utilisateur est flou, qu'il ait réellement modifié la valeur ou non.

Voici un CodePen qui montre la différence de comportement.

— XML
source

Je cherche un moyen d'effacer les erreurs de validation du formulaire. form. $ setPristine ne le fait pas. J'ai vu une autre forme de suggestion. $ SetUntouched, mais il semble que cela ne soit pas disponible dans angular 1.3 19 beta, qui est la version que j'utilise. Je peux cependant appeler form.field_name. $ SetUntouched, mais faire cela pour tous les champs est fastidieux, y a-t-il un meilleur moyen?

— T.Rex

$setPristinerend simplement la forme un- $dirty. Je pense que vous voudrez peut-être form.setValidity(). Voir plusieurs réponses utiles sur ce post .

— XML

14

Dans Pro Angular-6, le livre est détaillé ci-dessous;

valid : cette propriété renvoie true si le contenu de l'élément est valide et false dans le cas contraire.
invalid : cette propriété renvoie true si le contenu de l'élément n'est pas valide et false dans le cas contraire.
pristine : cette propriété renvoie true si le contenu de l'élément n'a pas été modifié.
dirty : cette propriété renvoie true si le contenu de l'élément a été modifié .
untouched : cette propriété renvoie true si l'utilisateur n'a pas visité l'élément.
touched : Cette propriété renvoie true si l'utilisateur a visité l'élément.

— fgul
source

6

Il convient de mentionner que les propriétés de validation sont différentes pour les formulaires et les éléments de formulaire (notez que les champs touchés et intacts ne concernent que les champs):

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
source