Chargement...

Introduction aux formulaires

En apprenant ce module, vous comprendrez comment créer, valider et gérer efficacement les formulaires dans une SPA Angular moderne. Vous découvrirez également comment les formulaires s’intègrent dans l’architecture basée sur les composants et comment ils participent à un flux de données cohérent dans votre application.

Exemple de Base

typescript
TYPESCRIPT Code 
// Exemple de base d'un formulaire simple dans Angular
// fichier: app.component.ts
import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
nom = '';

onSubmit() {
alert('Formulaire soumis avec succès : ' + this.nom);
}
}

// fichier: app.component.html

<form (ngSubmit)="onSubmit()">
<label for="nom">Nom :</label>
<input type="text" id="nom" [(ngModel)]="nom" name="nom" required>
<button type="submit">Envoyer</button>
</form>

Dans cet exemple de base, le composant Angular AppComponent représente le cœur du formulaire. La propriété nom sert de modèle pour lier la valeur du champ de saisie dans le HTML à la logique du composant à l’aide de la directive [(ngModel)]. Cette liaison bidirectionnelle (two-way data binding) permet une synchronisation automatique entre la vue et le modèle.
L’élément <form> utilise l’événement (ngSubmit) pour déclencher la méthode onSubmit() lors de l’envoi du formulaire. Cette méthode récupère les données du champ et affiche un message via alert(). Grâce à la directive required, Angular vérifie que le champ n’est pas vide avant de soumettre le formulaire.
Ce modèle illustre les concepts fondamentaux d’Angular :

  • Composants : encapsulent la logique du formulaire.
  • Gestion d’état : suit les modifications en temps réel via ngModel.
  • Flux de données : assure la cohérence entre le modèle et la vue.
  • Cycle de vie : le composant gère la création et la destruction du formulaire.

Exemple Pratique

typescript
TYPESCRIPT Code 
// fichier: contact-form.component.ts
import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
selector: 'app-contact-form',
templateUrl: './contact-form.component.html'
})
export class ContactFormComponent {
user = { name: '', email: '' };

onSubmit(form: NgForm) {
if (form.valid) {
console.log('Formulaire valide:', this.user);
} else {
console.log('Veuillez corriger les erreurs du formulaire.');
}
}
}

// fichier: contact-form.component.html

<form #contactForm="ngForm" (ngSubmit)="onSubmit(contactForm)">
<input name="name" [(ngModel)]="user.name" required placeholder="Nom">
<input name="email" [(ngModel)]="user.email" required email placeholder="Email">
<button type="submit">Envoyer</button>
</form>

Advanced Angular Implementation

typescript
TYPESCRIPT Code 
// fichier: reactive-form.component.ts
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
selector: 'app-reactive-form',
templateUrl: './reactive-form.component.html'
})
export class ReactiveFormComponent implements OnInit {
contactForm!: FormGroup;

constructor(private fb: FormBuilder) {}

ngOnInit() {
this.contactForm = this.fb.group({
name: ['', Validators.required],
email: ['', [Validators.required, Validators.email]],
});
}

onSubmit() {
if (this.contactForm.valid) {
console.log('Formulaire soumis:', this.contactForm.value);
} else {
console.error('Formulaire invalide.');
}
}
}

// fichier: reactive-form.component.html

<form [formGroup]="contactForm" (ngSubmit)="onSubmit()">
<input formControlName="name" placeholder="Nom">
<input formControlName="email" placeholder="Email">
<button type="submit">Envoyer</button>
</form>
  • Prop drilling : transmettre inutilement des données entre composants enfants.
  • Rendus inutiles : éviter de recharger le composant complet à chaque modification.
  • Mutations directes d’état : toujours utiliser les API Angular (FormBuilder, patchValue) au lieu de modifier directement les objets.

📊 Référence Complète

Angular Element/Method Description Syntax Example Notes
FormGroup Crée un groupe de contrôles de formulaire new FormGroup({}) this.form = new FormGroup({ name: new FormControl('') }) Utilisé pour formulaires réactifs
FormControl Représente un champ de formulaire new FormControl('') this.name = new FormControl('') Base des formulaires réactifs
FormBuilder Simplifie la création de FormGroup this.fb.group({}) this.form = this.fb.group({ name: [''] }) Facilite la création de structures complexes
NgModel Lie le modèle et la vue [(ngModel)]="value" <input [(ngModel)]="name"> Utilisé dans les formulaires basés sur les modèles
NgForm Directive pour gérer les formulaires HTML #form="ngForm" <form #form="ngForm"> Utilisé dans les formulaires basés sur le modèle
formGroup Liaison entre le FormGroup et le template [formGroup]="myForm" <form [formGroup]="form"> Indispensable pour les formulaires réactifs
formControlName Liaison avec un champ spécifique formControlName="name" <input formControlName="email"> Doit correspondre à un FormControl
ngSubmit Déclenchement lors de l’envoi du formulaire (ngSubmit)="submit()" <form (ngSubmit)="onSubmit()"> Alternative au submit HTML
patchValue Met à jour partiellement le formulaire this.form.patchValue({}) this.form.patchValue({ name: 'Mamad' }) Ne remplace pas tout le groupe
reset() Réinitialise les champs du formulaire form.reset() this.form.reset() Utile pour nettoyer le formulaire
setValue() Met à jour tous les champs du formulaire form.setValue({...}) this.form.setValue({ name: '', email: '' }) Doit définir tous les champs

📊 Complete Angular Properties Reference

Property Values Default Description Angular Support
ngModel any '' Lie données du modèle au champ du formulaire Depuis Angular 2+
formGroup FormGroup null Associe le formulaire réactif au template Angular 4+
formControlName string null Relie un champ à un FormControl Angular 4+
status VALID,INVALID,PENDING VALID Indique l’état du formulaire Angular 2+
value object string {} Représente les données du formulaire
dirty boolean false Indique si un champ a été modifié Angular 2+
touched boolean false Indique si un champ a été visité Angular 2+
pristine boolean true Champ non modifié Angular 2+
valid boolean true État global du formulaire Angular 2+

🧠 Testez Vos Connaissances

Prêt à Commencer

Testez Vos Connaissances

Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet

❓
4
Questions
🎯
70%
Pour Réussir
♾️
∞
Temps
🔄
∞
Tentatives

📝 Instructions

  • Lisez chaque question attentivement
  • Sélectionnez la meilleure réponse pour chaque question
  • Vous pouvez refaire le quiz autant de fois que vous le souhaitez
  • Votre progression sera affichée en haut
Sujet 1 de 1
Angular Tutoriel