Angular

Appearance

Créer la directive de validation personnalisée ? ​

Voici comment créer une directive de validation personnalisée dans Angular :

  1. Créez une classe de directive de validation personnalisée en implémentant l'interface Validator :
typescript
import { Directive, Input } from '@angular/core';
import { NG_VALIDATORS, Validator, AbstractControl } from '@angular/forms';

@Directive({
  // Attachez votre directive de validation à votre champ de formulaire en utilisant l'attribut HTML "myCustomValidator"
  selector: '[myCustomValidator][ngModel]',
  // Injectez le service NG_VALIDATORS pour que votre directive puisse être utilisée comme un validateur de formulaire
  providers: [{ provide: NG_VALIDATORS, useExisting: MyCustomValidatorDirective, multi: true }]
})
export class MyCustomValidatorDirective implements Validator {
  // Vous pouvez définir des paramètres de configuration pour votre directive en utilisant l'attribut HTML "myCustomValidator"
  @Input() myCustomValidator: string;

  // La méthode validate de l'interface Validator est appelée lorsque la valeur de votre champ de formulaire change
  validate(control: AbstractControl): { [key: string]: any } | null {
    // Vérifiez si la valeur de votre champ de formulaire est valide selon vos règles de validation personnalisées
    if (/* votre vérification de validation personnalisée */) {
      // Si la valeur est valide, retournez null pour indiquer qu'il n'y a pas d'erreur
      return null;
    } else {
      // Si la valeur est invalide, retournez un objet avec la clé de l'erreur et la valeur de l'erreur
      return { 'myCustomError': true };
    }
  }
}
import { Directive, Input } from '@angular/core';
import { NG_VALIDATORS, Validator, AbstractControl } from '@angular/forms';

@Directive({
  // Attachez votre directive de validation à votre champ de formulaire en utilisant l'attribut HTML "myCustomValidator"
  selector: '[myCustomValidator][ngModel]',
  // Injectez le service NG_VALIDATORS pour que votre directive puisse être utilisée comme un validateur de formulaire
  providers: [{ provide: NG_VALIDATORS, useExisting: MyCustomValidatorDirective, multi: true }]
})
export class MyCustomValidatorDirective implements Validator {
  // Vous pouvez définir des paramètres de configuration pour votre directive en utilisant l'attribut HTML "myCustomValidator"
  @Input() myCustomValidator: string;

  // La méthode validate de l'interface Validator est appelée lorsque la valeur de votre champ de formulaire change
  validate(control: AbstractControl): { [key: string]: any } | null {
    // Vérifiez si la valeur de votre champ de formulaire est valide selon vos règles de validation personnalisées
    if (/* votre vérification de validation personnalisée */) {
      // Si la valeur est valide, retournez null pour indiquer qu'il n'y a pas d'erreur
      return null;
    } else {
      // Si la valeur est invalide, retournez un objet avec la clé de l'erreur et la valeur de l'erreur
      return { 'myCustomError': true };
    }
  }
}
  1. Ajoutez votre directive de validation personnalisée à votre module Angular en l'ajoutant à la liste des déclarations de module :
typescript
import { MyCustomValidatorDirective } from './my-custom-validator.directive';

@NgModule({
  declarations: [
    MyCustomValidatorDirective
  ]
  // ... autres déclarations de module
})
export class MonModule {}
import { MyCustomValidatorDirective } from './my-custom-validator.directive';

@NgModule({
  declarations: [
    MyCustomValidatorDirective
  ]
  // ... autres déclarations de module
})
export class MonModule {}
  1. Vous pouvez maintenant utiliser votre directive de validation personnalisée dans votre template HTML en l'attachant à votre champ de formulaire en utilisant l'attribut HTML myCustomValidator :
html
<form>
  <label for="email">Adresse email :</label><br>
  <input type="email" id="email" [(ngModel)]="email" name="email" required myCustomValidator><br>
</form>
<form>
  <label for="email">Adresse email :</label><br>
  <input type="email" id="email" [(ngModel)]="email" name="email" required myCustomValidator><br>
</form>

Comment afficher les erreurs de validation de la directive ? ​

Pour afficher les erreurs de validation de votre directive de validation personnalisée dans votre template HTML, vous pouvez utiliser la propriété errors de la directive ngModel associée à votre champ de formulaire.

Voici comment cela pourrait être fait :

  1. Dans votre template HTML, ajoutez un élément pour afficher les erreurs de validation et référencez votre champ de formulaire en utilisant la directive #fieldRef :
html
<form>
  <label for="email">Adresse email :</label><br>
  <input type="email" id="email" [(ngModel)]="email" name="email" required myCustomValidator #emailRef="ngModel"><br>
  <div *ngIf="emailRef.invalid && emailRef.touched">
    <!-- Affichez les erreurs de validation ici -->
  </div>
</form>
<form>
  <label for="email">Adresse email :</label><br>
  <input type="email" id="email" [(ngModel)]="email" name="email" required myCustomValidator #emailRef="ngModel"><br>
  <div *ngIf="emailRef.invalid && emailRef.touched">
    <!-- Affichez les erreurs de validation ici -->
  </div>
</form>
  1. Dans l'élément qui affiche les erreurs de validation, vous pouvez utiliser la propriété errors de la directive ngModel pour vérifier si votre erreur de validation personnalisée est présente :
html
<form>
  <label for="email">Adresse email :</label><br>
  <input type="email" id="email" [(ngModel)]="email" name="email" required myCustomValidator #emailRef="ngModel"><br>
  <div *ngIf="emailRef.invalid && emailRef.touched">
    <div *ngIf="emailRef.errors.myCustomError">Mon erreur de validation personnalisée s'est produite</div>
  </div>
</form>
<form>
  <label for="email">Adresse email :</label><br>
  <input type="email" id="email" [(ngModel)]="email" name="email" required myCustomValidator #emailRef="ngModel"><br>
  <div *ngIf="emailRef.invalid && emailRef.touched">
    <div *ngIf="emailRef.errors.myCustomError">Mon erreur de validation personnalisée s'est produite</div>
  </div>
</form>

Dans cet exemple, nous affichons un message d'erreur si l'erreur de validation personnalisée myCustomError est présente dans la propriété errors de la directive ngModel.

Vous pouvez également utiliser la propriété errors pour afficher des messages d'erreur différents pour chaque type d'erreur de validation en utilisant des directives de structure ngIf supplémentaires.