Validadores asíncronos
Validar contra el servidor de forma asíncrona
Validadores asíncronos es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Angular Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Angular Academy incluye 4 lecciones en total.
Validación en espera
Algunas validaciones necesitan un servidor, como comprobar si un nombre de usuario está disponible. Los validadores asíncronos devuelven una Promise o un Observable que se resuelve en un mapa de errores o en null.
El tipo AsyncValidatorFn
Un validador asíncrono recibe un control y devuelve Observable<ValidationErrors | null> (o una Promise).
const v: AsyncValidatorFn = (control) => {
return checkAvailable(control.value);
};Devolver null significa que es válido
Resuelva en null cuando el valor sea válido, o en un objeto de error como { taken: true } cuando no lo sea, exactamente igual que con los validadores síncronos.
Un validador de nombres de usuario
Este validador llama a un servicio y transforma el resultado.
usernameValidator(api: UserApi): AsyncValidatorFn {
return (control) =>
api.isTaken(control.value).pipe(
map(taken => taken ? { taken: true } : null)
);
}Registrarlo
Los validadores asíncronos se indican en el argumento tercero de un control, separados de los validadores síncronos.
new FormControl('', {
validators: [Validators.required],
asyncValidators: [usernameValidator(api)]
});El estado PENDING
Mientras se ejecuta un validador asíncrono, el estado del control es PENDING. Úselo para mostrar un indicador de carga.
@if (form.controls.username.pending) {
<span>Checking...</span>
}Esperar antes de enviar solicitudes
Los validadores asíncronos se ejecutan cada vez que cambia el valor. Aplique debounce para evitar sobrecargar el servidor.
return timer(300).pipe(
switchMap(() => api.isTaken(control.value)),
map(taken => taken ? { taken: true } : null)
);switchMap cancela las llamadas obsoletas
Usar switchMap cancela la solicitud anterior en curso cuando el valor vuelve a cambiar, de modo que solo importa el resultado más reciente.
Estrategia updateOn
Establezca updateOn: 'blur' para que la validación asíncrona se ejecute solo cuando el usuario abandone el campo y así reducir las solicitudes.
new FormControl('', {
asyncValidators: [usernameValidator(api)],
updateOn: 'blur'
});Leer el error
Muestre el error una vez que termine la validación y el control esté modificado o visitado.
@if (form.controls.username.hasError('taken')) {
<span>Username already taken</span>
}Prácticas recomendadas
Aplique siempre debounce, cancele las solicitudes obsoletas, muestre un indicador de espera y gestione los errores de red para que el formulario no se quede atascado en PENDING.
Comprobación rápida
Compruebe su comprensión de los validadores asíncronos.
Resumen
Ha aprendido que AsyncValidatorFn devuelve un Observable/Promise de ValidationErrors | null y se registra en el tercer argumento del control, lo que establece el control en PENDING. Aplique debounce y use switchMap para gestionar las llamadas al servidor.
Preguntas frecuentes
¿La lección «Validadores asíncronos» es gratis?
Sí — el texto completo de «Validadores asíncronos» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Angular Academy, actualiza a CoddyKit PRO. El curso de Angular Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Validadores asíncronos»?
Validar contra el servidor de forma asíncrona Practicas Angular Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Angular Academy?
No se requiere experiencia previa. Angular Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Validadores asíncronos»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Angular Academy?
Sí. Cada lección de Angular Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Formularios reactivos con tipado
- FormArray y campos dinámicos
- Validadores asíncronos
- Patrones de FormBuilder