Angular offre deux approches pour les formulaires. Les formulaires template-driven sont simples et définis en HTML ; les formulaires reactive sont définis en TypeScript et offrent plus de contrôle — meilleurs pour les formulaires complexes, dynamiques ou fortement validés.
// just import FormsModule; minimal TS
<form #f="ngForm" (ngSubmit)="onSubmit(f.value)">
<input name="email" ngModel required email /> <!-- ngModel registers the field -->
<input name="password" ngModel required minlength="8" />
<button [disabled]="f.invalid">Submit</button>
</form>
La structure du formulaire et la validation vivent dans le template via les directives ngModel. Simple à mettre en place, mais le modèle de formulaire est implicite et plus difficile à tester/manipuler par programmation.
import { FormBuilder, Validators } from "@angular/forms";
export class SignupComponent {
constructor(private fb: FormBuilder) {}
form = this.fb.group({
email: ["", [Validators.required, Validators.email]],
password: ["", [Validators.required, Validators.minLength(8)]],
});
onSubmit() {
if (this.form.valid) console.log(this.form.value);
}
}
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<input formControlName="email" />
<input formControlName="password" type="password" />
<button [disabled]="form.invalid">Submit</button>
</form>
Le formulaire est un objet explicite (FormGroup/FormControl) que vous construisez en TS. Cela le rend observable, testable et facile à manipuler (ajouter/supprimer des champs, réagir aux changements via valueChanges).
Template-driven Reactive
Where defined HTML (ngModel) TypeScript (FormBuilder)
Form model implicit/async explicit, synchronous object
Validation directives in template validators in code
Dynamic forms hard easy (add/remove controls in code)
Testability harder straightforward (it's just an object)
Best for simple forms complex/dynamic/validated forms
this.form.get("email")!.valueChanges.subscribe(v => ...); // react to changes
this.form.valid; // synchronous validity check
Choisir la bonne approche de formulaire est important pour la maintenabilité : template-driven pour les formulaires rapides et simples ; reactive pour tout ce qui est complexe — assistants multi-étapes, ensembles de champs dynamiques, validation entre champs, ou formulaires nécessitant des tests unitaires.
Le modèle explicite et observable des formulaires reactive est généralement préféré dans les applications sérieuses car il est plus puissant, testable et scalable, même s'il nécessite plus de code initial.