Appearance
Comment créer la directive de validation personnalisée ?
Voici comment créer une directive de validation personnalisée dans Angular :
- Créez une classe de directive de validation personnalisée en implémentant l'interface
Validator
:
ts
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 };
}
}
}
- 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 {}
- 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>
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 :
- 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>
- Dans l'élément qui affiche les erreurs de validation, vous pouvez utiliser la propriété
errors
de la directivengModel
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>
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.