CHAPITRE 12 : LES FORMULAIRES

Dernier chapitre de ce cours : les formulaires, par lesquels passent toutes les données que saisissent vos utilisateurs.

1. Deux approches

Nous détaillons la première, plus accessible, puis nous ouvrirons sur la seconde.

2. Un formulaire template-driven

export class InscriptionComponent {
  modele = {
    nom: '',
    email: '',
    filiere: ''
  };

  envoyer(formulaire: any) {
    if (formulaire.valid) {
      console.log('Donnees envoyees :', this.modele);
    }
  }
}

<form #monFormulaire="ngForm" (ngSubmit)="envoyer(monFormulaire)">

  <label for="nom">Nom complet</label>
  <input id="nom" name="nom"
         [(ngModel)]="modele.nom"
         required minlength="3"
         #nom="ngModel">

  <div *ngIf="nom.invalid && nom.touched">
    <small *ngIf="nom.errors?.['required']">Le nom est obligatoire.</small>
    <small *ngIf="nom.errors?.['minlength']">Au moins 3 caracteres.</small>
  </div>

  <label for="email">Adresse e-mail</label>
  <input id="email" name="email" type="email"
         [(ngModel)]="modele.email"
         required email
         #email="ngModel">

  <div *ngIf="email.invalid && email.touched">
    <small>Adresse e-mail invalide.</small>
  </div>

  <label for="filiere">Filiere</label>
  <select id="filiere" name="filiere" [(ngModel)]="modele.filiere" required>
    <option value="">-- Choisir --</option>
    <option value="info">Informatique</option>
    <option value="math">Mathematiques</option>
  </select>

  <button type="submit" [disabled]="monFormulaire.invalid">S'inscrire</button>
</form>

Les points à noter

• name est obligatoire sur chaque champ lié par ngModel : sans lui, Angular lève une erreur.
• #nom="ngModel" crée une référence permettant de consulter l'état du champ.
• touched évite d'afficher une erreur avant même que l'utilisateur ait saisi quoi que ce soit. C'est un détail d'ergonomie qui change beaucoup le ressenti.

3. Les états d'un champ

La combinaison utile pour afficher une erreur : invalid && touched.

4. Les validateurs intégrés

required
minlength="3"   maxlength="50"
min="0"         max="20"
email
pattern="[0-9]{9}"

5. Un aperçu des formulaires réactifs

import { FormBuilder, Validators } from '@angular/forms';

export class InscriptionComponent implements OnInit {
  formulaire!: FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit(): void {
    this.formulaire = this.fb.group({
      nom:   ['', [Validators.required, Validators.minLength(3)]],
      email: ['', [Validators.required, Validators.email]]
    });
  }

  envoyer() {
    if (this.formulaire.valid) {
      console.log(this.formulaire.value);
    }
  }
}

<form [formGroup]="formulaire" (ngSubmit)="envoyer()">
  <input formControlName="nom">
  <input formControlName="email">
  <button [disabled]="formulaire.invalid">Envoyer</button>
</form>

Toute la structure est décrite dans la classe : c'est plus verbeux, mais bien plus maniable dès que le formulaire se complique.

6. Un rappel de sécurité

La validation côté navigateur améliore le confort, elle ne protège rien. Elle se contourne en quelques secondes. Toute donnée reçue doit être revérifiée côté serveur : c'est une règle sans exception.

Et maintenant ?

Vous disposez des fondations : composants, liaison de données, directives, services, routage et formulaires. Pour poursuivre : les formulaires réactifs en profondeur, RxJS et les Observables, les guards de routes, les tests unitaires, puis le déploiement.

Le meilleur conseil pour la suite : construisez un vrai projet, même modeste. Une gestion d'étudiants, un carnet d'adresses, une liste de tâches. C'est en butant sur des problèmes concrets que les notions s'ancrent.

À retenir

• Template-driven pour le simple, réactif pour le complexe
• name est obligatoire avec ngModel
• Afficher les erreurs sur invalid && touched
• La validation du navigateur ne remplace jamais celle du serveur