Comment créer une fonction personnalisée de validation ? ​

Voici comment vous pouvez créer une fonction de validation personnalisée et l'ajouter à un FormControl dans Angular:

1. Créez votre fonction de validation en implémentant l'interface ValidatorFn de Angular:

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

export function emailValidator(): ValidatorFn {
  return (control: AbstractControl<string>): {[key: string]: any} | null => {
    const forbidden = !control.value.endsWith('gmail.com');
    return forbidden ? {'forbiddenEmail': {value: control.value}} : null;
  };
}

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

export function emailValidator(): ValidatorFn {
  return (control: AbstractControl<string>): {[key: string]: any} | null => {
    const forbidden = !control.value.endsWith('gmail.com');
    return forbidden ? {'forbiddenEmail': {value: control.value}} : null;
  };
}

2. Ajoutez la fonction de validation à un FormControl:

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

const emailControl = new FormControl('', emailValidator());

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

const emailControl = new FormControl('', emailValidator());

La fonction de validation doit renvoyer un objet contenant une clé et une valeur si la validation échoue, ou null si elle réussit. Si elle renvoie null, cela signifie que le contrôle de formulaire est considéré comme valide. Si elle renvoie un objet, le contrôle de formulaire est considéré comme invalide et le contenu de l'objet est associé au contrôle de formulaire comme une erreur de validation.

Par exemple, dans l'exemple de code ci-dessus, si la valeur du contrôle de formulaire se termine par "gmail.com", la fonction renvoie null, indiquant que le contrôle de formulaire est valide. Si la valeur du contrôle de formulaire ne se termine pas par "gmail.com", la fonction renvoie un objet avec la clé "forbiddenEmail" et la valeur de la valeur du contrôle de formulaire comme valeur.

Vous pouvez utiliser ces erreurs de validation dans votre template HTML pour afficher des messages d'erreur à l'utilisateur ou pour effectuer d'autres actions. Par exemple:

<div *ngIf="emailControl.hasError('forbiddenEmail')">
  Email is invalid.
</div>

<div *ngIf="emailControl.hasError('forbiddenEmail')">
  Email is invalid.
</div>

Le type de retour de la fonction de validation étant un objet, vous pouvez également ajouter plusieurs erreurs de validation différentes à l'objet renvoyé. Cela vous permet de valider plusieurs règles de validation en même temps pour un même contrôle de formulaire.

Fonction de validation avec des paramètres ​

Voici comment vous pouvez rendre la fonction de validation plus générique en lui passant une chaîne de caractères comme paramètre:

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

export function emailValidator(domain: string): ValidatorFn {
  return (control: AbstractControl<string>): {[key: string]: any} | null => {
    const forbidden = !control.value.endsWith(domain);
    return forbidden ? {'forbiddenEmail': {value: control.value}} : null;
  };
}

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

export function emailValidator(domain: string): ValidatorFn {
  return (control: AbstractControl<string>): {[key: string]: any} | null => {
    const forbidden = !control.value.endsWith(domain);
    return forbidden ? {'forbiddenEmail': {value: control.value}} : null;
  };
}

Vous pouvez maintenant utiliser la fonction de validation comme ceci:

const emailControl = new FormControl('', emailValidator('gmail.com'));

const emailControl = new FormControl('', emailValidator('gmail.com'));

Cela vous permet de valider si la valeur du contrôle de formulaire se termine par n'importe quel domaine de votre choix en passant le domaine en tant que paramètre de la fonction de validation.