45. Reactive Forms (RF) : Configuration et FormControl

Les Reactive Forms proposent une approche orientée modèle où la structure et la validation du formulaire sont définies explicitement dans la classe du composant, offrant plus de contrôle, de flexibilité et de testabilité.

1. Importer ReactiveFormsModule

Assurez-vous que ce module est importé dans votre AppModule ou module de fonctionnalité.

2. Utilisation de FormControl

FormControl est la brique de base des Reactive Forms. Il représente un champ d'entrée unique et son état (valeur, validité).

Instancier des contrôles

Nous instancions généralement les contrôles dans le constructeur du composant ou dans ngOnInit.

typescript import { FormControl } from '@angular/forms';

export class ReactiveSetupComponent implements OnInit { // 1. Déclarer l'instance FormControl usernameControl: FormControl | null = null;

ngOnInit(): void { // 2. Instancier le contrôle : valeur initiale, tableau de validateurs this.usernameControl = new FormControl('Nom par défaut', Validators.required); } }

3. Lier le contrôle au template

Nous codons le lien entre l'instance FormControl du composant et l'entrée HTML via la liaison de propriété [formControl].

html

Changements réactifs (Observables)

Comme les Reactive Forms sont pilotées par le modèle, nous pouvons nous abonner aux changements du contrôle, traitant les données du formulaire comme un flux continu (un Observable).

typescript ngOnInit(): void { // ... instanciation this.usernameControl.valueChanges.subscribe(newValue => { console.log('Nom d'utilisateur modifié en :', newValue); }); }