Comment ajouter des validateurs synchrones ?

Voici comment vous pouvez utiliser la propriété validators pour ajouter des validateurs aux contrôles FormControl dans l'exemple de code LoginFormComponent :

import { Component, inject } from '@angular/core';
import { ReactiveFormsModule, FormControl, Validators, FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-login-form',
  standalone: true,
  imports: [ReactiveFormsModule],
  template: `
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
      <label>
        Email:
        <input type="email" [formControl]="emailControl">
      </label>
      <br>
      <label>
        Mot de passe:
        <input type="password" [formControl]="passwordControl">
      </label>
      <br>
      <button type="submit">Se connecter</button>
    </form>
  `
})
export class LoginFormComponent {
  private formBuilder = inject(FormBuilder);

  emailControl = new FormControl('', [Validators.required, Validators.email]);
  passwordControl = new FormControl('', [Validators.required, Validators.minLength(6)]);
  form = this.formBuilder.group({
      email: this.emailControl,
      password: this.passwordControl
  })

  onSubmit() {
    // La soumission du formulaire est gérée ici
  }
}

Dans cet exemple, nous avons ajouté les validateurs Validators.required et Validators.email au contrôle FormControl emailControl, et les validateurs Validators.required et Validators.minLength(6) au contrôle FormControl passwordControl. Ces validateurs exigent respectivement que le champ de courriel soit obligatoire et ait un format de courriel valide, et que le champ de mot de passe soit obligatoire et ait au moins 6 caractères.

Validateur selon un autre champ (exemple: confirmation de mot de passe)

Vous pouvez également ajouter des validateurs de groupe en utilisant la méthode FormGroup de FormBuilder. Par exemple, pour ajouter une validation de groupe qui vérifie que les champs "password" et "confirmPassword" sont identiques :

import { FormGroup } from '@angular/forms';
// ...
form = this.formBuilder.group({
  password: ['', Validators.required],
  confirmPassword: ['', Validators.required]
}, { validator: this.checkPasswords });

checkPasswords(group: FormGroup) {
  let pass = group.controls.password.value;
  let confirmPass = group.controls.confirmPassword.value;

  return pass === confirmPass ? null : { notSame: true }
}
// ...

Comment utiliser ces erreurs de validation dans votre template HTML ?

Voici comment vous pouvez utiliser les erreurs de validation dans votre template HTML avec Angular :

<form>
  <label>
    Champ:
    <input type="text" [formControl]="control">
  </label>
    <!-- Affichage des erreurs de validation -->
    @if (control.invalid && (control.dirty || control.touched)) {
      @if (control.hasError('required')) {
        <div>Le champ est obligatoire.</div>
      }
      @if (control.hasError('minlength')) {
        <div>Le champ doit avoir au moins 6 caractères.</div>
      }
    }
</form>

Dans cet exemple, nous avons utilisé @if pour afficher un message d'erreur si le contrôle est considéré comme invalide et si le champ de formulaire a été modifié ou a reçu le focus (control.dirty || control.touched). Nous avons également utilisé la méthode hasErrors du contrôle pour vérifier les erreurs spécifiques qui ont provoqué l'invalidation du contrôle, et avons affiché des messages d'erreur correspondants.

Afficher les informations d'une erreur

Pour afficher les informations de l'erreur minlength dans votre template HTML, vous pouvez accéder à la propriété requiredLength de l'objet errors du contrôle de formulaire. Voici comment cela pourrait être mis en œuvre dans votre template HTML :

<form>
  <label>
    Champ:
    <input type="text" [formControl]="control">
  </label>
  <!-- Affichage des erreurs de validation -->
  @if (control.invalid && (control.dirty || control.touched)) {
    @if (control.hasError('required')) {
      <div>Le champ est obligatoire.</div>
    }
    @if (control.hasError('minlength')) {
      <div>Le champ doit avoir au moins {{ control.errors!.['minlength'].requiredLength }} caractères.</div>
    }
  }
</form>

Dans cet exemple, nous avons utilisé la propriété requiredLength de l'objet errors pour afficher le nombre de caractères minimum requis par le validateur minlength.

Validateurs existants

Voici une liste des validateurs de formulaire couramment utilisés dans Angular, avec une brève explication de chacun :

Validateur	Description
Validators.required	Exige que le champ de formulaire soit renseigné (ne soit pas vide).
Validators.minLength(n)	Exige que le champ de formulaire ait au moins n caractères.
Validators.maxLength(n)	Exige que le champ de formulaire ait au plus n caractères.
Validators.email	Exige que le champ de formulaire ait un format de courriel valide.
Validators.pattern(regex)	Exige que le champ de formulaire respecte un motif spécifique défini par la expression régulière regex.
Validators.nullValidator	Ne valide aucune valeur. Utilisé pour désactiver la validation d'un contrôle de formulaire.
Validators.compose([])	Prend en entrée un tableau de validateurs et renvoie un nouveau validateur qui exécute chaque validateur dans le tableau et renvoie une erreur si l'un d'eux échoue.
Validators.min(n)	Exige que la valeur du champ de formulaire soit supérieure ou égale à n.
Validators.max(n)	Exige que la valeur du champ de formulaire soit inférieure ou égale à n.

Utiliser setValidators() et updateValueAndValidity()

Voici un exemple qui utilise la méthode setValidators() et updateValueAndValidity() pour ajouter des validateurs à un contrôle de formulaire dans Angular :

import { Component } from '@angular/core';
import { ReactiveFormsModule, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-form',
  imports: [ReactiveFormsModule],
  standalone: true,
  template: `
    <form>
      <label>
        Champ:
        <input type="text" [formControl]="control">
      </label>
    </form>
  `
})
export class FormComponent {
  control = new FormControl('');

  constructor() {
    // Ajout d'un validateur de longueur minimale de 6 caractères au contrôle
    this.control.setValidators(Validators.minLength(6));
    // Mise à jour de la valeur et de la validité du contrôle
    this.control.updateValueAndValidity();
  }
}

Dans cet exemple, nous avons créé un contrôle FormControl avec la valeur initiale '' (une chaîne vide) et avons ajouté le validateur Validators.minLength(6) en appelant la méthode setValidators(). Nous avons ensuite mis à jour la valeur et la validité du contrôle en appelant la méthode updateValueAndValidity().

Le contrôle ne sera considéré comme valide que si la valeur du champ de formulaire a au moins 6 caractères. Si la valeur est inférieure à 6 caractères, le contrôle sera considéré comme invalide et affichera une erreur de validation.