Formulaires

Introduction

• 2 façons d'utiliser les formulaires : template base ou reactive

• template base : à utiliser pour les formulaires simples seulement

  • On utilise [(ngModel)] = "propriete" ou (ngModel) = "propriete" pour lier une propriété du composant à la valeur d'un champ selon si on veut une liaison de données ou une double liaison

• reactive : liés aux modèles, plus facilement testables, mais un peu plus de code

Formulaires réactifs

• importer FormsModule et ReactiveFormsModule
• (ngSubmit)="methode()" pour lancer une méthode à la soumission du formulaire

Exemple du composant (.ts)

1. Créer des objets FormControl pour chaque champ
2. Les grouper dans des FormGroup

import { Component, inject } from "@angular/core";
import { FormBuilder, FormGroup, Validators} from "@angular/forms";
...
export class ConnexionPage {
  connectForm: FormGroup;
  private formBuilder = inject(FormBuilder)

  ngOnInit() {
    this.connectForm = this.formBuilder.group({
      //Façon "en ligne" de créer des FormControl
      courriel: ["", [Validators.required, Validators.email]],
      mdp: ["", Validators.required]
    });
  }
  ...

Exemple de la vue (.html)

<form [formGroup]="connectForm" (ngSubmit)="connexion()">
    <div>
      <label for="courriel">Courriel</label>
      <input id="courriel" type="email" formControlName="courriel" />
    </div>

    <div>
      <label for="mdp">Password</label>
      <input id="mdp" type="password" formControlName="mdp" />
    </div>
    <button type="submit" [disabled]="connectForm.invalid">Register</button>
  </form>

Validation

• valid, invalid, dirty, pristine, submitted, touched, untouched sont des états des champs et des formulaires
• Utiliser ? dans les vues *@if(loginInForm.controls.userName?.invalid) permet d'éviter la vérification explicite de la présence d'une propriété

• Des méthodes de validation sont fournies telles que Validators.required et Validators.email

• Pour créer des méthodes personnalisées : écrire un méthode qui prend en paramètre FormControl, et qui retourne un objet avec une clé et un message

private validCegep(control: FormControl): {[key: string]: any} {
    return control.value.includes('cegepoutaouais.qc.ca') ?
        null : {'validCegep': 'Doit être une adresse courriel du cégep'}
}

Pour utiliser une méthode personnalisée, l'ajouter dans la liste des méthodes de validation ex.: [Validators.required, Validators.email, this.validCegep]

Afficher les erreurs à l'utilisateur

Dans le template HTML il est possible d'afficher à l'utilisateur les messages de validation en temps réel.

On pourra utiliser @if d'Anngular pour vérifier si le formulaire contient des erreurs et afficher le message approprié.

Pour récupérer facilement le contenu des champs dans le template, il est suggéré de créer une fonction d'aide pour chaque champ du formulaire.

// Dans le composant

get courriel() {
  return this.connectForm.get('courriel');
}

<div>
  <label for="courriel">Courriel</label>
  <input id="courriel" type="email" formControlName="courriel" />
  @if(courriel?.invalid && (courriel?.dirty || courriel?.touched)) {

    <!-- Vérification de chaque validateur et ajout du message correspondant -->
    @if(courriel?.hasError('required')) {
      <div class=text-danger> 
        Le champ est requis
      </div>
    }

    @if(courriel?.hasError('email')) {
      <div class=text-danger> 
        Veuillez entrer un courriel valide
      </div>
    }              

  }
</div>

Références

Formulaires réactifs Valider un formulaire