Controlar la apariencia de un elemento según el estado de un formulario es una necesidad frecuente en cualquier aplicación web. Angular ofrece una forma elegante de activar o desactivar clases CSS de manera dinámica, evitando problemas comunes de usabilidad como el desplazamiento inesperado de elementos en pantalla.
¿Cómo crear un controlador con validaciones en Angular?
El punto de partida es definir un FormControl con reglas de validación. En este caso se crea un nameControl que representa un campo de nombre con dos validadores [01:00]:
- Validators.required: el campo no puede estar vacío.
- Validators.minLength(3): el valor debe tener al menos tres caracteres.
Esta combinación es muy común en campos como contraseñas o nombres de usuario, donde se necesita garantizar un tamaño mínimo de entrada. Angular evalúa automáticamente si el controlador es válido o inválido según estas reglas.
¿Qué papel juegan las propiedades invalid y touched?
Cada FormControl expone propiedades útiles para determinar su estado. La propiedad invalid indica que el valor actual no cumple con las validaciones definidas. Por otro lado, touched señala que el usuario ya interactuó con el campo [03:10]. Ambas condiciones combinadas permiten mostrar mensajes de error solo cuando realmente tiene sentido hacerlo, es decir, cuando el usuario ya tocó el campo y el valor sigue siendo incorrecto.
¿Por qué no usar ngIf para mostrar mensajes de error?
Una primera aproximación es usar *ngIf para renderizar condicionalmente un mensaje como "nombre inválido". Funciona: el mensaje aparece cuando el campo es inválido y desaparece cuando es válido [03:40]. Sin embargo, hay un problema de usabilidad importante.
Cuando *ngIf agrega o remueve un elemento del DOM, los elementos que están debajo se desplazan. Imagina un formulario largo donde los campos se mueven cada vez que aparece o desaparece un error. Eso genera una experiencia incómoda para el usuario [04:30].
¿Cómo funciona el class binding dinámico en Angular?
La solución es utilizar property binding con la sintaxis [class.show] [05:05]. En lugar de agregar o quitar el elemento del DOM, el mensaje de error siempre está presente, pero oculto con opacity: 0. Cuando la condición se cumple, Angular activa la clase show y la opacidad cambia a 1.
La sintaxis es:
html
<span class="message-error" [class.show]="nameControl.invalid && nameControl.touched">
nombre inválido
</span>
El prefijo class. seguido del nombre de la clase que quieras activar es todo lo que necesitas. El nombre puede ser cualquiera: show, active o el que prefieras, siempre que coincida con la clase definida en tu CSS.
¿Cómo agregar animaciones suaves al mensaje de error?
Para que la transición entre visible e invisible sea fluida, se define en CSS una regla de transición [06:00]:
css
.message-error {
background: red;
color: white;
opacity: 0;
transition: all linear 0.5s;
}
.message-error.show {
opacity: 1;
}
- El estado por defecto mantiene el elemento con opacity en cero.
- Cuando Angular activa la clase
show, la opacidad sube a uno.
- La propiedad
transition genera una animación lineal de medio segundo.
Un detalle importante: el valor del tiempo en transition no lleva la letra "s" adicional si ya la incluiste, ya que eso puede provocar errores de interpretación en el navegador [07:30].
¿Cuál es la ventaja frente a renderizado condicional?
El resultado es que el elemento siempre ocupa su espacio en el layout, por lo que ningún otro campo se desplaza. La clase se activa y desactiva de forma dinámica según la condición, y la animación de opacidad ofrece una experiencia visual mucho más limpia. Al inspeccionar el DOM en el navegador, puedes ver cómo la clase show aparece y desaparece en tiempo real [07:50].
Esta técnica es una buena práctica en formularios reactivos de Angular. Se puede aplicar a cualquier escenario donde necesites reflejar un estado visual: tareas completadas, modos de edición o estados de carga. ¿Ya intentaste aplicar [class.completed] a una lista de tareas según su estado? Cuéntanos cómo te fue en los comentarios.
