Appearance
Comment mettre des validateurs dans le formulaire HTML avec le module FormsModule d'Angular ?
Pensez à ajouter FormsModule
FormsModule est un module Angular qui contient une série de directives et de services qui vous permettent de créer et de gérer des formulaires dans votre application Angular. Il contient notamment les directives suivantes :
ngModel
: permet de lier la valeur d'un champ de formulaire à une propriété d'un composant.ngModelGroup
: permet de grouper des champs de formulaire de manière à ce qu'ils partagent une validation et une gestion de l'état communs.ngForm
: permet de créer un formulaire Angular à partir d'un formulaire HTML.formControlName
: permet de lier un champ de formulaire à unFormControl
dans unFormGroup
.
Pour utiliser FormsModule
dans votre application Angular, vous devez l'importer dans votre module principal ou dans un module dédié aux formulaires, et l'ajouter à la liste des imports du décorateur @NgModule
.
ts
import { FormsModule } from '@angular/forms';
@NgModule({
declarations: [
// Ici contient les composants qui profitent de FormsModule
],
imports: [
FormsModule,
// d'autres imports ici
]
})
export class MonModule { }
Pour ajouter des validateurs à un formulaire HTML dans Angular, vous pouvez utiliser le module FormsModule
et le directive de contrôle de formulaire ngModel
. Voici un exemple de comment cela pourrait être fait :
Mettre des attributs HTML comme validateur
- Dans votre template HTML, ajoutez la directive
ngModel
à votre champ de formulaire et définissez un nom de propriété pour votre champ de formulaire :
html
<form>
<label for="email">Adresse email :</label><br>
<input type="email" id="email" [(ngModel)]="email" name="email"><br>
</form>
- Vous pouvez maintenant ajouter des validateurs à votre champ de formulaire en utilisant les attributs HTML standard tels que
required
,minlength
,maxlength
, etc. Par exemple :
html
<form>
<label for="email">Adresse email :</label><br>
<input type="email" id="email" [(ngModel)]="email" name="email" required><br>
</form>
Quelques validators
Attribut HTML | Description |
---|---|
required | Indique si un champ est requis pour la soumission du formulaire. |
min | Spécifie la valeur minimale pour un champ numérique ou une date. |
max | Spécifie la valeur maximale pour un champ numérique ou une date. |
pattern | Spécifie un motif pour valider une chaîne de caractères. |
minlength | Spécifie la longueur minimale pour une chaîne de caractères. |
maxlength | Spécifie la longueur maximale pour une chaîne de caractères. |
step | Spécifie l'intervalle pour un champ numérique. |
Cela va rendre le champ de formulaire obligatoire et empêcher l'utilisateur de soumettre le formulaire s'il n'est pas rempli.
Vous pouvez également utiliser des validateurs personnalisés en créant une directive de validation personnalisée et en l'attachant à votre champ de formulaire en utilisant la syntaxe suivante :
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 dans le template HTML quand le formulaire a été soumis ?
Pour afficher les erreurs de validation dans votre template HTML lorsque le formulaire a été soumis, vous pouvez utiliser la propriété invalid
de votre formulaire et de vos champs de formulaire.
Voici comment cela pourrait être fait :
- Dans votre template HTML, ajoutez un bouton de soumission de formulaire et référencez votre formulaire en utilisant la directive
#formRef
:
html
<form #formRef="ngForm">
<label for="email">Adresse email :</label><br>
<input type="email" id="email" [(ngModel)]="email" name="email" required><br>
<button type="submit">Envoyer</button>
</form>
- Dans votre component Angular, vous pouvez maintenant vérifier si le formulaire est valide ou non en utilisant la propriété
invalid
de votre formulaire :
typescript
@Component({
// ... autres déclarations de component
})
export class MonComponent {
@ViewChild('formRef') formRef!: NgForm;
onSubmit() {
if (this.formRef.invalid) {
// Le formulaire contient des erreurs de validation
// Affichez les erreurs de validation ici
} else {
// Le formulaire est valide, envoyez-le ou faites ce que vous avez besoin de faire
}
}
}
- Pour afficher les erreurs de validation de chaque champ de formulaire, vous pouvez utiliser la propriété
invalid
de chaque champ de formulaire et la propriétéerrors
de la directivengModel
:
html
<form #formRef="ngForm">
<label for="email">Adresse email :</label><br>
<input type="email" id="email" [(ngModel)]="email" name="email" required #emailRef="ngModel"><br>
<div *ngIf="emailRef.invalid && emailRef.touched">
<div *ngIf="emailRef.errors.required">L'adresse email est obligatoire</div>
</div>
<button type="submit">Envoyer</button>
</form>
Dans cet exemple, nous affichons un message d'erreur si le champ de formulaire de l'adresse email est invalide et a été touché (c'est-à-dire s'il a été modifié par l'utilisateur). Vous pouvez ajouter d'autres vérifications pour d'autres types d'erreurs en utilisant la propriété errors
de la directive ngModel
.
En partant du formulaire
html
<form #formRef="ngForm">
<label for="email">Adresse email :</label><br>
<input type="email" id="email" ngModel name="email" required><br>
<div *ngIf="formRef.controls['email'].invalid && formRef.controls['email'].touched">
Email est requis
</div>
</form>
En utilisant cette syntaxe, vous attachez une référence à ngForm à l'élément form en utilisant #formRef
, vous pouvez maintenant accéder aux propriétés de validation de l'élément d'entrée via formRef.controls['email']
TIP
La propriété touched
d'un champ de formulaire Angular indique si l'utilisateur a déjà cliqué ou tapé sur ce champ. Cette propriété est souvent utilisée pour afficher des messages d'erreur uniquement après que l'utilisateur ait interagi avec le champ, pour éviter d'afficher des messages d'erreur inutiles avant que l'utilisateur n'ait eu l'occasion de corriger une erreur éventuelle.
Voici quelques autres propriétés couramment utilisées sur les champs de formulaire Angular :
valid
: indique si le champ est valide selon les validateurs appliqués.invalid
: indique si le champ est invalide selon les validateurs appliqués.dirty
: indique si le champ a été modifié par l'utilisateur.pristine
: indique si le champ n'a pas été modifié par l'utilisateur.errors
: contient les erreurs de validation actuelles du champ.value
: contient la valeur actuelle du champ.disabled
: permet de désactiver le champ.enabled
: permet d'activer le champ.status
: indique l'état actuel du champ (VALID, INVALID, PENDING, DISABLED)
Ces propriétés sont toutes des propriétés d'un AbstractControl
, une classe de base pour tous les contrôles de formulaire Angular, donc ces propriétés sont disponibles pour tous les types de champs de formulaire Angular (ngModel, ngModelGroup, ngForm)