Comprendre .ng-dirty dans le contrôle de formulaire Angular

Dans Angular, le contrôle de formulaire est un concept fondamental pour gérer les interactions utilisateur et les validations. L'une des classes de contrôle de formulaire est .ng-dirty. Cette classe est automatiquement ajoutée avec la directive ngModel chaque fois que la valeur du champ de formulaire est modifiée par l'utilisateur.

Qu'est-ce que .ng-dirty ?

La classe .ng-dirty est une des quatre classes de statut d'un contrôle de formulaire Angular, les autres étant .ng-pristine, .ng-valid et .ng-invalid.

Elle est utilisée pour suivre les changements de l'utilisateur sur les champs de formulaire. Lorsqu'un utilisateur modifie la valeur d'un champ de formulaire, Angular marque ce champ comme "dirty" en ajoutant la classe .ng-dirty. Si le champ n'est pas modifié depuis son initialisation, la classe restera .ng-pristine.

Par exemple :

<input [(ngModel)]="something">

Supposons que vous changiez la valeur de "something", Angular ajoute automatiquement la classe .ng-dirty à l'entrée.

Applications pratiques de .ng-dirty

La classe .ng-dirty peut être utilisée dans différentes situations, par exemple, pour informer visuellement l'utilisateur des champs qu'il a modifiés.

Vous pouvez utiliser CSS pour mettre en surbrillance les champs modifiés :

.ng-dirty {
  background-color: #ffeeba;
}

Ce code CSS changera la couleur de fond de tous les champs de formulaire modifiés en une couleur jaune clair.

Conseils et bonnes pratiques

• N'utilisez la classe .ng-dirty que si les changements de l'utilisateur ont un impact sur l'expérience ou la logique de votre application.
• Vous pouvez combiner .ng-dirty avec d'autres classes de statut pour obtenir un contrôle plus précis. Par exemple, vous pouvez cibler les champs de formulaire qui ont été modifiés et sont invalides à l'aide de .ng-dirty.ng-invalid.

En conclusion, la classe .ng-dirty est un outil utile offert par Angular pour suivre les modifications apportées par l'utilisateur aux champs de formulaire. Elle peut être utilisée pour améliorer la convivialité et la logique de votre application.