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

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?

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.

$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.

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.

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.