Comment mettre des validateurs dans le formulaire HTML avec le module FormsModule d'Angular ?

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 :

<form>
  <label for="email">Adresse email :</label><br>
  <input type="email" id="email" [(ngModel)]="email" name="email"><br>
</form>

2. Vous pouvez maintenant ajouter des validateurs à votre champ de formulaire en utilisant les attributs HTML standard tels que required, minlength, maxlength, etc. Par exemple :

<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 :

<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 :

<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>

2. 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 :

@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
    }
  }
}

3. 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 :

<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

<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)