7. Comprendre les Composants du Formulaire

Les balises Ionic utilisées

Le formulaire que nous avons inséré utilise plusieurs balises propres à Ionic pour garantir un affichage optimal sur mobile (champs assez grands pour les doigts, styles adaptés à iOS ou Android).

• <form> : C’est la balise HTML standard pour créer un formulaire. La notation #userForm="ngForm" est spécifique à Angular et permet de suivre l’état du formulaire (savoir si tous les champs sont remplis correctement).

• <ion-item> : C’est un conteneur très utilisé dans Ionic. Il regroupe un champ de saisie et son étiquette (label) sur une belle ligne avec une séparation en dessous.

• <ion-label position="floating"> : C’est le texte descriptif du champ (ex: “Nom”). L’attribut position="floating" crée une animation très élégante : le texte est à l’intérieur du champ et “flotte” vers le haut quand on commence à taper.

• <ion-input> : C’est la zone de saisie. Elle remplace la balise classique <input>. L’attribut ngModel permet de lier la valeur tapée par l’utilisateur aux variables TypeScript de notre application (on appelle ça le “Data Binding”). L’attribut required indique que le champ est obligatoire.

• <ion-button expand="full"> : C’est le bouton de validation. L’attribut expand="full" indique au bouton de prendre toute la largeur disponible sur l’écran et de supprimer les bords arrondis extérieurs.

En associant Angular (ngModel) et Ionic (<ion-input>), on obtient un formulaire joli, facile à utiliser sur mobile, et dont les données sont très simples à récupérer dans notre code !