48. Implémentation de validateurs personnalisés

Les validateurs intégrés sont souvent insuffisants. Les validateurs personnalisés nous permettent d'implémenter des règles spécifiques à l'application (ex : vérifier la complexité d'un mot de passe, vérifier l'unicité d'un nom d'utilisateur localement).

Structure d'un validateur

Un validateur personnalisé est une simple fonction qui prend une instance de FormControl (ou AbstractControl) et renvoie soit :

• null si la validation réussit.
• Un objet d'erreur de validation (ex : { 'forbiddenName': { value: control.value } }) si la validation échoue.

Exemple : Validateur de nom interdit

Nous voulons empêcher les utilisateurs de choisir 'Test' ou 'Admin' comme nom d'utilisateur.

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

export class CustomValidators {

// Une fonction usine (factory) qui renvoie la fonction de validation static forbiddenName(forbiddenWords: string[]): ValidatorFn { // C'est la fonction de validation qu'Angular appelle return (control: AbstractControl): ValidationErrors | null => {

  const currentName = control.value as string;
  if (!currentName) { return null; }
  
  const isForbidden = forbiddenWords.includes(currentName.toLowerCase());
  
  // Si interdit, renvoyer l'objet d'erreur
  return isForbidden ? { 'forbiddenName': { value: control.value } } : null;
};

} }

Appliquer le validateur personnalisé

typescript // Dans le composant où le formulaire est défini this.userForm = this.fb.group({ username: ['', [ Validators.required, // Utilisation de la factory pour appliquer le validateur CustomValidators.forbiddenName(['admin', 'root']) ]] });

Nous pouvons maintenant vérifier la clé d'erreur 'forbiddenName' dans le template.