Explicación de la Clase de Control de Formulario .ng-dirty en Angular

La pregunta nos consulta acerca del nombre correcto de la clase de control de formulario en Angular que se establece en verdadero mediante [(ngModel)] cada vez que se cambia el valor. La respuesta correcta es .ng-dirty.

Angular ofrece ciertas clases CSS que son aplicadas automáticamente a los formularios y a los controles individuales de los mismos, dependiendo de su estado. .ng-dirty es una de esas clases. Se añade a un elemento de formulario cuando el valor del control de dicho elemento cambia.

Esto sucede con la ayuda de la directiva de dos caminos [(ngModel)]. Es este enlace de dos vías que reacciona a los cambios de valor y aplica automáticamente la clase .ng-dirty. Esto puede ser extremadamente útil para los desarrolladores al proporcionar una indicación visual de los elementos de formulario que han cambiado, facilitando así la detección de errores o problemas.

Por ejemplo, el siguiente código se refiere a un campo de entrada. Cada vez que el usuario cambie el valor de este campo, Angular añadirá automáticamente la clase .ng-dirty:

<input type="text" [(ngModel)]="name" />

El uso de la clase .ng-dirty puede ser más valioso cuando se combina con estilos CSS específicos. Por ejemplo, puedes cambiar el aspecto de todos los campos de entrada que tienen la clase .ng-dirty, tal vez resaltándolos en un color diferente. De esa manera, puedes proporcionar un feedback visual a tus usuarios sobre los campos de formulario que ya han interactuado.

input.ng-dirty {
    background-color: #eff0f1;
}

Como buena práctica, es recomendable tomar ventaja de estas clases CSS proporcionadas por Angular para mejorar la experiencia de usuario y facilitar el proceso de diseño de formularios. También ayuda a tener una comprensión clara de cómo y cuándo estas clases son aplicadas para usarlas de manera más efectiva en tus proyectos de Angular.