Angular Academy · Leçon

Validation des contrôles personnalisés

Fournissez des validateurs depuis des contrôles personnalisés

Validation des contrôles personnalisés est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 4 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.

Contrôles avec validation intégrée

Un contrôle personnalisé peut intégrer sa propre logique de validation en implémentant l’interface Validator et en s’enregistrant auprès de NG_VALIDATORS, afin que les utilisateurs bénéficient automatiquement de la validité.

L’interface Validator

Validator exige une méthode validate qui renvoie ValidationErrors (une carte d’erreurs) ou null lorsque la valeur est valide.

import { Validator, ValidationErrors, AbstractControl } from '@angular/forms';

export class RatingComponent implements Validator {
  validate(control: AbstractControl): ValidationErrors | null {
    return control.value > 0 ? null : { required: true };
  }
}

Enregistrer NG_VALIDATORS

Ajoutez un deuxième fournisseur multiple pour NG_VALIDATORS à côté de NG_VALUE_ACCESSOR, en utilisant de nouveau forwardRef.

import { NG_VALIDATORS } from '@angular/forms';

providers: [
  { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RatingComponent), multi: true },
  { provide: NG_VALIDATORS, useExisting: forwardRef(() => RatingComponent), multi: true }
]

Renvoyer des cartes d’erreurs

Les clés de la carte d’erreurs deviennent des entrées dans control.errors. Utilisez des clés descriptives et, si nécessaire, des données complémentaires afin que les modèles puissent afficher des messages ciblés.

validate(control: AbstractControl): ValidationErrors | null {
  const v = control.value;
  if (v == null) return { required: true };
  if (v < this.min) return { min: { required: this.min, actual: v } };
  return null;
}

Utiliser les erreurs

Les modèles lisent control.errors comme ils le font pour les validateurs intégrés, et affichent les messages lorsque le contrôle est invalide et touché.

<small *ngIf="form.controls.stars.errors?.['required']">Pick a rating</small>

Combiner avec des validateurs externes

Les validateurs du contrôle et ceux fournis par l’utilisateur (dans le formulaire réactif) sont tous exécutés et fusionnés. Les règles de votre contrôle s’ajoutent à celles du formulaire, elles ne les remplacent pas.

stars: [0, [Validators.required]] // plus the control's own validate()

Validation dynamique

Si la validation dépend d’une entrée qui change, appelez la fonction de rappel de modification enregistrée pour indiquer à Angular qu’il doit relancer la validation.

private onValidatorChange: () => void = () => {};
registerOnValidatorChange(fn: () => void) { this.onValidatorChange = fn; }

@Input() set min(v: number) { this._min = v; this.onValidatorChange(); }

Validation asynchrone

Pour effectuer des vérifications côté serveur, implémentez AsyncValidator avec une méthode validate qui renvoie un observable ou une promesse d’erreurs, puis enregistrez-le auprès de NG_ASYNC_VALIDATORS.

validate(control: AbstractControl): Observable<ValidationErrors | null> {
  return this.api.isUnique(control.value).pipe(
    map(ok => ok ? null : { taken: true })
  );
}

Rester ciblé

Placez dans le contrôle uniquement la validation qui lui est intrinsèque (une note doit être supérieure à zéro). Laissez les règles propres au métier au formulaire qui utilise le contrôle, afin de préserver sa réutilisabilité.

Tester la validation

Testez unitairement validate directement en lui transmettant un contrôle factice contenant une valeur, puis en vérifiant que la carte d’erreurs renvoyée correspond aux attentes ou vaut null.

it('requires a rating', () => {
  const c = new FormControl(0);
  expect(component.validate(c)).toEqual({ required: true });
});

Contrôle personnalisé complet

Une fois l’accès à la valeur, la désactivation, l’état touché et la validation implémentés, votre composant est un contrôle de formulaire complet et réutilisable, impossible à distinguer des champs natifs pour les utilisateurs.

Vérification rapide

Vérifiez vos connaissances sur la validation.

Récapitulatif

Vous avez ajouté la validation en implémentant Validator.validate, en enregistrant NG_VALIDATORS, en renvoyant des cartes d’erreurs, en prenant en charge la nouvelle validation dynamique via registerOnValidatorChange, et éventuellement AsyncValidator avec NG_ASYNC_VALIDATORS pour obtenir un contrôle personnalisé entièrement intégré.

Questions Fréquemment Posées

La leçon « Validation des contrôles personnalisés » est-elle gratuite ?

Oui — le texte complet de « Validation des contrôles personnalisés » 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 « Validation des contrôles personnalisés » ?

Fournissez des validateurs depuis des contrôles personnalisés 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 4 sur 4.

Combien de temps prend la leçon « Validation des contrôles personnalisés » ?

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