Angular
Reactive Forms

FormGroup & FormControl

Contrairement aux Template-Driven Forms vus précédemment, les Reactive Forms sont pilotés directement depuis le TypeScript. Cela offre un contrôle total, instantané et très puissant sur chaque champ (FormControl) et sur le formulaire entier (FormGroup).

Inscription Complète
Piloté par ReactiveFormsModule
Données en temps réel
FORMULAIRE INVALIDE
// État du FormGroup principal (myForm.value)
{
  "name": "",
  "email": "",
  "password": "",
  "isActive": false
}
// État du FormControl indépendant (control.value)
""
// Bonus : Mélange avec ngModel (Compétences)
Aucune compétence ajoutée.

L'Anatomie des Reactive Forms

FormControl

C'est la brique de base. Un FormControl représente un seul champ de saisie. Il garde en mémoire sa valeur et son état de validité. On peut l'utiliser tout seul !

control = new FormControl('test');
FormGroup

C'est une collection de FormControls. Il regroupe plusieurs champs. Si un seul champ du groupe est invalide, alors tout le FormGroup devient invalide.

form = new FormGroup({ nom: ... });

Le Code Source Complet

reactive-form.component.ts
import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-form',
  imports: [ReactiveFormsModule],
  template: `
    <!-- Lier le HTML au FormGroup -->
    <form [formGroup]="myForm" (ngSubmit)="onSubmit()">
      
      <!-- Lier un input à un FormControl -->
      <input formControlName="name" />
      
      <div *ngIf="name.invalid && name.touched">Nom invalide</div>
      
      <button type="submit" [disabled]="myForm.invalid">Envoyer</button>
    </form>
  `
})
export class FormComponent {
  
  // 1. Déclarer le FormGroup
  myForm = new FormGroup({
    name: new FormControl('', [Validators.required, Validators.minLength(3)]),
    email: new FormControl('', [Validators.required, Validators.email]),
  });

  // 2. Créer des "Getters" pour faciliter l'accès dans le HTML
  get name() { return this.myForm.get('name')!; }
  get email() { return this.myForm.get('email')!; }

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