Skip to content

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 à un FormControl dans un FormGroup.

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

  1. 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>
  1. 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 HTMLDescription
requiredIndique si un champ est requis pour la soumission du formulaire.
minSpécifie la valeur minimale pour un champ numérique ou une date.
maxSpécifie la valeur maximale pour un champ numérique ou une date.
patternSpécifie un motif pour valider une chaîne de caractères.
minlengthSpécifie la longueur minimale pour une chaîne de caractères.
maxlengthSpécifie la longueur maximale pour une chaîne de caractères.
stepSpé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>

Voir Créer la directive de validation personnalisée

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 :

  1. 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>
  1. 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
    }
  }
}
  1. 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 directive ngModel :
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)

Abonnez-vous à la newsletter

En juillet, recevez en avant-première notre newsletter avec les dernières actualités, tutoriels, astuces et ressources Angular directement par email !