Ionic - 10.10 Créer un formulaire réactif

Cette leçon présente le formulaire réactif, qui se construit dans le code TypeScript plutôt que dans le HTML. Il permet de définir chaque contrôle, ses règles de validation et le moment où il se met à jour. Il s'agit d'une approche différente de celle de la leçon précédente, où le formulaire se construit dans le HTML.

Activer les formulaires réactifs

Pour utiliser un formulaire réactif, le module qui contient le formulaire doit importer ReactiveFormsModule à la place de FormsModule.

Dans le fichier TypeScript de la page, on crée une propriété form de type FormGroup. Elle donne accès à toutes les fonctionnalités liées au formulaire. Elle doit être créée à l'initialisation de la page, dans la méthode ngOnInit. La page doit donc disposer de ce formulaire dès son chargement.

Définir les contrôles

Le formulaire regroupe cinq contrôles : titre, description, prix, date de départ et date d'arrivée. Chacun est un FormControl qui reçoit une valeur par défaut. Pour le titre, cette valeur est null, car il ne doit pas avoir de valeur par défaut.

Le deuxième argument est un objet de configuration. Il définit quand le contrôle se met à jour, avec trois choix : change, submit ou blur. Ici, le choix blur fait que le contrôle se met à jour lorsqu'on quitte le champ. Les trois choix sont donc change, submit et blur. Le choix change met à jour le contrôle à chaque modification, tandis que submit attend l'envoi du formulaire.

this.form = new FormGroup({
  title: new FormControl(null, {
    updateOn: 'blur',
    validators: [Validators.required],
  }),
});

Ajouter les validateurs

Les validateurs sont placés dans un tableau. Le titre utilise Validators.required, pour être obligatoire. La description ajoute une longueur maximale de 180 caractères. Ces validateurs s'appliquent à la valeur du contrôle, quelle que soit la méthode de mise à jour choisie.

Le prix reçoit une valeur minimale de 1, afin qu'il ne puisse être ni négatif ni nul. Les dates gardent le même validateur que le titre, à savoir required.

En résumé

Le formulaire réactif se construit dans la classe de la page, à l'initialisation. Chaque contrôle définit sa valeur par défaut, son moment de mise à jour et ses validateurs. La leçon suivante synchronise ce formulaire avec le template HTML. Cette structure permet de contrôler précisément chaque champ.

Points clés

• Un formulaire réactif utilise ReactiveFormsModule au lieu de FormsModule.
• La propriété form de type FormGroup regroupe les contrôles.
• Chaque FormControl reçoit une valeur par défaut et une configuration.
• Le choix blur met à jour le contrôle lorsqu'on quitte le champ.
• Les validateurs required, la longueur maximale et la valeur minimale encadrent les saisies.

Questions fréquentes

Quelle est la différence avec un formulaire basé sur un template ?

Dans le formulaire réactif, les contrôles sont créés dans le code TypeScript. Dans le formulaire basé sur un template, ils sont décrits dans le HTML.

Pourquoi le prix doit-il être au moins égal à 1 ?

La valeur minimale empêche un prix négatif ou nul, ce qui évite une saisie incohérente.

Que signifie la mise à jour blur ?

Le contrôle se met à jour lorsque l'utilisateur quitte le champ, et non à chaque frappe au clavier.