Angular 33: Validación de Formularios Reactivos
easy⏱ 5 mincourseangular
Los validadores son el segundo argumento de un control
new FormControl('', Validators.required) — o, con el atajo de arreglo de FormBuilder, email: ['', [Validators.required, Validators.email]] — adjunta una o más funciones validadoras a un control. Angular las vuelve a ejecutar en cada cambio de valor y guarda el resultado en el control.
form = this.fb.group({
email: ['', [Validators.required, Validators.email]],
password: ['', [Validators.required, Validators.minLength(8)]],
});
invalid + touched: no le grites al usuario antes de que escriba
Comprobar solo form.get('email')?.invalid mostraría un error en un formulario vacío e intacto en el instante en que se renderiza. Combinarlo con .touched (verdadero una vez que el campo recibió foco y luego lo perdió) retrasa el mensaje hasta que el usuario haya tenido realmente la oportunidad de completarlo — una pequeña comprobación que marca una gran diferencia en usabilidad.
@if (form.get('email')?.invalid && form.get('email')?.touched) {
<p class="error">Enter a valid email address.</p>
}
Inspeccionando exactamente qué validador falló
form.get('email')?.errors es un objeto con clave por nombre de validador, por ejemplo { required: true } o { email: true }, así que puedes ajustar el mensaje: @if (form.get('email')?.hasError('required')) { ... } @else if (form.get('email')?.hasError('email')) { ... }.