Angular Academy · Leçon

Validateurs asynchrones

Validez les données auprès du serveur de manière asynchrone

Validateurs asynchrones est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Angular Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Angular Academy comprend 4 leçons au total.

Une validation qui attend

Certaines validations nécessitent un serveur, par exemple pour vérifier si un nom d’utilisateur est déjà pris. Les validateurs asynchrones renvoient une promesse ou un observable qui se résout en une carte d’erreurs ou en null.

Le type AsyncValidatorFn

Un validateur asynchrone reçoit un contrôle et renvoie Observable<ValidationErrors | null> (ou une promesse).

const v: AsyncValidatorFn = (control) => {
  return checkAvailable(control.value);
};

Renvoyer null signifie que la valeur est valide

Résolvez la valeur en null lorsqu’elle est valide, ou renvoyez un objet d’erreur tel que { taken: true } lorsqu’elle ne l’est pas, exactement comme pour les validateurs synchrones.

Un validateur de nom d’utilisateur

Ce validateur appelle un service et transforme le résultat.

usernameValidator(api: UserApi): AsyncValidatorFn {
  return (control) =>
    api.isTaken(control.value).pipe(
      map(taken => taken ? { taken: true } : null)
    );
}

L’enregistrer

Les validateurs asynchrones sont placés dans le troisième argument d’un contrôle, séparément des validateurs synchrones.

new FormControl('', {
  validators: [Validators.required],
  asyncValidators: [usernameValidator(api)]
});

L’état PENDING

Pendant l’exécution d’un validateur asynchrone, l’état du contrôle est PENDING. Utilisez-le pour afficher un indicateur de chargement.

@if (form.controls.username.pending) {
  <span>Checking...</span>
}

Temporiser les requêtes

Les validateurs asynchrones se déclenchent à chaque changement de valeur. Ajoutez une temporisation pour éviter de surcharger le serveur.

return timer(300).pipe(
  switchMap(() => api.isTaken(control.value)),
  map(taken => taken ? { taken: true } : null)
);

switchMap annule les appels obsolètes

L’utilisation de switchMap annule la requête précédente en cours lorsque la valeur change à nouveau ; seul le dernier résultat est donc pris en compte.

Stratégie updateOn

Définissez updateOn: 'blur' afin que la validation asynchrone ne s’exécute que lorsque l’utilisateur quitte le champ, ce qui réduit le nombre de requêtes.

new FormControl('', {
  asyncValidators: [usernameValidator(api)],
  updateOn: 'blur'
});

Lire l’erreur

Affichez l’erreur une fois la validation terminée et lorsque le contrôle a été modifié ou touché.

@if (form.controls.username.hasError('taken')) {
  <span>Username already taken</span>
}

Bonnes pratiques

Ajoutez toujours une temporisation, annulez les requêtes obsolètes, affichez un indicateur d’attente et gérez les erreurs réseau afin que le formulaire ne reste pas bloqué dans l’état PENDING.

Vérification rapide

Vérifiez votre compréhension des validateurs asynchrones.

Récapitulatif

Vous avez appris que AsyncValidatorFn renvoie un observable ou une promesse de ValidationErrors | null, enregistré dans le troisième argument du contrôle, ce qui place le contrôle dans l’état PENDING. Ajoutez une temporisation et utilisez switchMap pour gérer les appels au serveur.

Questions Fréquemment Posées

La leçon « Validateurs asynchrones » est-elle gratuite ?

Oui — le texte complet de « Validateurs asynchrones » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Angular Academy, passe à CoddyKit PRO. Le cours Angular Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Validateurs asynchrones » ?

Validez les données auprès du serveur de manière asynchrone Tu pratiques Angular Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Angular Academy ?

Aucune expérience préalable n'est requise. Angular Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « Validateurs asynchrones » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Angular Academy ?

Oui. Chaque leçon Angular Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à Angular Academy