Angular 2 version finale tutoriel 3 : gestion de formulaire via ReactiveFormsModule

La gestion des formulaires en Angular 2 peut se faire de deux façons : exclusivement via des directive dans le template - à la manière de se qui se fait en AngularJS - (méthode dite "template driven form"), ou bien essentiellement via des objets côté TypeScript, certes épaulés par des directives côté template (méthode dite "reactive form"). C'est la deuxième façon ("reactive forms"), où davantage de choses ont lieu côté code, que nous allons détailler dans ce tutoriel.

Côté TypeScript, la gestion d'un formulaire repose sur un objet FormGroup, qui peut contenir contenir 1 à n FormControl. A partir de là, FormGroup et FormControl sont liés à notre formulaire côté template via les directives "formGroup" et "formControlName".
Ensuite, côté TypeScript, nous utiliseront un FormBuilder, et plus particulièrement la méthode group() qu'il met à disposition, afin de créer de façon moins verbeuse un FormGroup et ses instances de FormControl.

Pour finir, nous aborderons la validation d'un formulaire tant globalement (un formulaire sera considéré valide si chacun de ses FormControl est lui-même valide) que granulairement au niveau de chaque FormControl, ce qui nous permettra d'indiquer en temps réel à l'utilisateur s'il a fourni les données que l'on attend de lui.