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.

import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
     // Ici contient les composants qui profitent de FormsModule
  ],
  imports: [
    FormsModule,
    // d'autres imports ici
  ]
})
export class MonModule { }

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 :

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

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

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

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>

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

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

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

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

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

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