Vous voilà à l’aube de la création de formulaires dans vos applications Angular, et vous vous demandez quelle approche choisir : Template-driven ou Reactive ? Les deux sont des approches puissantes pour gérer les formulaires, mais elles diffèrent dans leur manière d’être implémentées et dans leurs cas d’utilisation. Dans cet article, nous allons explorer ensemble ces deux approches, en couvrant la création de formulaires simples avec ngModel, l’introduction aux formulaires réactifs avec FormControl et FormGroup, ainsi que la validation des formulaires pour les deux approches. Préparez-vous à devenir un maître des formulaires Angular !

Formulaires Angular : un élément clé de vos applications

Les formulaires sont des éléments essentiels de la plupart des applications web. Ils permettent aux utilisateurs de saisir des données, de les valider et de les envoyer au serveur. Angular offre deux approches principales pour gérer les formulaires : les formulaires Template-driven et les formulaires Reactive. Chaque approche a ses avantages et ses inconvénients, et le choix entre les deux dépendra des besoins spécifiques de votre projet.

Imaginez que vous deviez construire un pont : vous avez le choix entre deux méthodes, une avec des plans préconçus et une avec une approche plus flexible. Chaque méthode a ses avantages et ses inconvénients, et le choix dépendra du type de pont que vous souhaitez construire. C’est la même chose pour les formulaires Angular : il faut choisir l’approche la plus appropriée à votre projet.

Les formulaires Template-driven : simplicité et rapidité

L’approche Template-driven est la plus simple à mettre en œuvre, et elle convient bien pour les formulaires simples, avec un nombre limité de champs et une logique de validation basique. Dans cette approche, la plupart de la logique du formulaire est gérée directement dans le template HTML, en utilisant des directives comme ngModel et des attributs comme required.

1. Création d’un formulaire simple avec ngModel

Pour créer un formulaire simple avec l’approche Template-driven, vous devez :

1. Importer le module FormsModule dans le module de votre application :

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // Importez FormsModule

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FormsModule], // Ajoutez FormsModule à imports
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

1. Définir un objet dans le composant pour stocker les données du formulaire :

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  formData = {
    name: '',
    email: '',
  };

  onSubmit() {
    console.log(this.formData);
  }
}

1. Créer le formulaire dans le template HTML en utilisant la directive ngModel pour lier les champs du formulaire aux propriétés de l’objet :

<form #monForm="ngForm" (ngSubmit)="onSubmit()">
  <div>
    <label for="name">Nom:</label>
    <input type="text" id="name" name="name" [(ngModel)]="formData.name" required />
  </div>
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" [(ngModel)]="formData.email" required />
  </div>
  <button type="submit">Envoyer</button>
</form>

Dans cet exemple, la directive [(ngModel)] permet de lier les valeurs des champs du formulaire aux propriétés formData.name et formData.email. La balise <form> reçoit l’attribut ngSubmit qui appelle la méthode onSubmit() lorsque l’utilisateur valide le formulaire.

2. Validation des formulaires Template-driven

Pour ajouter de la validation aux formulaires Template-driven, vous pouvez utiliser les attributs HTML5 comme required, minlength, maxlength, pattern ou type sur les champs du formulaire et l’instance du formulaire récupéré avec #monForm= »ngForm ». Vous pouvez ensuite afficher des messages d’erreur en utilisant des directives comme ngIf :

<form #monForm="ngForm" (ngSubmit)="onSubmit()">
  <div>
    <label for="name">Nom:</label>
    <input type="text" id="name" name="name" [(ngModel)]="formData.name" required #name="ngModel" />
    <div *ngIf="name.invalid && (name.dirty || name.touched)">
        <p *ngIf="name.errors?.['required']">Le nom est requis</p>
    </div>
  </div>
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" [(ngModel)]="formData.email" required #email="ngModel" />
     <div *ngIf="email.invalid && (email.dirty || email.touched)">
        <p *ngIf="email.errors?.['required']">L'email est requis</p>
    </div>
  </div>
  <button type="submit" [disabled]="monForm.invalid">Envoyer</button>
</form>

Dans cet exemple, on récupère une référence à chaque input avec #name= »ngModel » et #email= »ngModel ». Cette référence permet de vérifier si un input est valide, a été touché ou modifié, et donc de gérer l’affichage des erreurs.

Les formulaires Reactive : puissance et flexibilité

L’approche Reactive est plus complexe à mettre en œuvre que l’approche Template-driven, mais elle offre plus de puissance, plus de flexibilité et plus de contrôle sur les formulaires. Dans cette approche, la plupart de la logique du formulaire est gérée dans le composant TypeScript, en utilisant des classes comme FormControl, FormGroup et FormBuilder.

1. Introduction à FormControl et FormGroup

Pour créer un formulaire réactif, vous devez :

1. Importer les modules nécessaires ReactiveFormsModule, FormControl, FormGroup, dans votre module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule, FormControl, FormGroup } from '@angular/forms'; // Importez ReactiveFormsModule, FormControl et FormGroup

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, ReactiveFormsModule], // Ajoutez ReactiveFormsModule à imports
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

1. Définir un FormGroup dans le composant pour regrouper les champs du formulaire, ainsi que des FormControl pour chaque champ :

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  form = new FormGroup({
    name: new FormControl('', Validators.required),
    email: new FormControl('', [Validators.required, Validators.email]),
  });

  onSubmit() {
    console.log(this.form.value);
  }
}

Dans cet exemple, le FormGroup regroupe les deux FormControl: name et email. Pour chaque FormControl, on peut ajouter une validation (ici Validators.required et Validators.email).

1. Lier le FormGroup au formulaire HTML en utilisant la directive formGroup et en liant chaque champ du formulaire avec l’attribut formControlName :

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <div>
    <label for="name">Nom:</label>
    <input type="text" id="name" formControlName="name" />
        <div *ngIf="form.get('name')?.invalid && (form.get('name')?.dirty || form.get('name')?.touched)">
            <p *ngIf="form.get('name')?.errors?.['required']">Le nom est requis</p>
        </div>
  </div>
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" formControlName="email" />
     <div *ngIf="form.get('email')?.invalid && (form.get('email')?.dirty || form.get('email')?.touched)">
          <p *ngIf="form.get('email')?.errors?.['required']">L'email est requis</p>
           <p *ngIf="form.get('email')?.errors?.['email']">L'email est invalide</p>
     </div>
  </div>
  <button type="submit" [disabled]="form.invalid">Envoyer</button>
</form>

Dans cet exemple, la directive [formGroup]= »form » lie le formulaire HTML au FormGroup défini dans le composant. L’attribut formControlName lie chaque champ du formulaire au FormControl correspondant.

2. Validation des formulaires Reactive

La validation des formulaires Reactive est gérée de manière centralisée dans le composant TypeScript, en utilisant les validators de la classe Validators. Les messages d’erreur sont affichés dans le template HTML en fonction de l’état du FormControl :

Dans l’exemple ci-dessus, nous utilisons déjà l’instance de FormGroup pour récupérer des informations sur chaque control et leur affichage.

Template-driven vs Reactive : comment choisir ?

En résumé :

• Formulaires Template-driven : sont idéaux pour les formulaires simples, avec un nombre limité de champs et une validation basique. Ils sont rapides à mettre en œuvre et faciles à comprendre.

• Formulaires Reactive : sont idéaux pour les formulaires complexes, avec un grand nombre de champs, une validation personnalisée et des interactions complexes. Ils offrent plus de contrôle, de flexibilité et de testabilité.

Vous avez maintenant une vision claire des deux approches de gestion des formulaires dans Angular. Vous savez créer des formulaires simples avec ngModel, utiliser FormControl et FormGroup pour créer des formulaires réactifs, et valider vos formulaires avec les deux approches. Vous avez désormais les outils nécessaires pour créer des formulaires efficaces et performants, adaptés aux besoins de vos projets.

Et vous, quelles sont vos expériences avec les formulaires Angular ? Quelle approche préférez-vous et pourquoi ? N’hésitez pas à partager vos questions, vos commentaires et vos retours d’expérience !