Ionic - 10.4 Ajouter un formulaire basé sur un template

Cette leçon transforme le template d'authentification en formulaire Angular basé sur un template. Vous verrez comment entourer les champs, leur donner un nom et réagir à l'envoi. Les champs Ionic fonctionnent avec Angular sans configuration supplémentaire.

Créer le formulaire Angular

Pour créer le formulaire, il suffit d'entourer la grille qui contient les champs avec une balise form. Il faut aussi vérifier que le module FormsModule est importé dans le module de la page. Cette étape ne demande pas de réécrire les champs, puisqu'ils sont déjà en place.

Les champs créés avec Ionic sont reconnus par Angular, car ils utilisent la même technologie. Il n'y a donc rien d'autre à faire pour les transformer en formulaire Ionic.

<form #form="ngForm" (ngSubmit)="onSubmit(form)">

Lier chaque champ et ajouter des exigences

Chaque champ doit recevoir l'attribut ngModel et un attribut name. Pour l'e-mail, le name vaut email. Pour le mot de passe, il vaut password, avec une longueur minimale de 6 caractères. Le bouton et les champs restent ceux du template configuré dans la leçon précédente : seule la structure Angular est ajoutée.

Des exigences comme required permettent de rendre un champ obligatoire. Le type du champ compte aussi : le type email ouvre la bonne configuration de clavier sur mobile.

<ion-input type="email" name="email" ngModel required></ion-input>

Gérer le bouton et l'envoi

Seul le bouton de connexion doit envoyer le formulaire. Il reçoit donc le type submit, alors que le bouton d'inscription reste un bouton classique. Le clic sur le bouton de connexion déclenche donc l'envoi du formulaire, et la méthode reçoit alors toutes les valeurs saisies.

Dans la classe de la page, la méthode onSubmit reçoit le formulaire en paramètre, de type NgForm. Pour l'instant, elle affiche le formulaire dans la console. Si l'on quitte un champ sans le remplir, il apparaît en rouge, car il attend une valeur. Le formulaire est ainsi prêt à être vérifié, ce qui sera détaillé dans la leçon suivante.

onSubmit(form: NgForm) {
  console.log(form);
}

En résumé

Un formulaire Angular se crée en entourant les champs d'une balise form et en leur ajoutant ngModel et un name. Les exigences comme required et minlength valident les saisies. Le bouton de connexion envoie le formulaire, qui s'affiche dans la console. La prochaine leçon traite de la validation en détail.

Points clés

• Entourer les champs d'une balise form crée un formulaire Angular.
• Les champs Ionic fonctionnent avec Angular car ils utilisent la même technologie.
• L'attribut ngModel et le name permettent à Angular de suivre chaque champ.
• Les exigences comme required et minlength encadrent les saisies.
• Le bouton de connexion envoie le formulaire, dont les valeurs s'affichent dans la console.

Questions fréquentes

Faut-il un module particulier pour un formulaire basé sur un template ?

Oui, le module FormsModule doit être importé dans le module de la page pour que le formulaire fonctionne.

Pourquoi le champ e-mail utilise-t-il le type email ?

Ce type ouvre la configuration de clavier adaptée sur mobile, avec le symbole arobase disponible.

Pourquoi un champ apparaît-il en rouge ?

Il est vide alors qu'il est requis. Angular signale ainsi qu'il faut le remplir avant que le formulaire puisse être validé.