Ionic - 10.14 Formulaire de réservation : prénom, nom et voyageurs
Cette leçon commence le formulaire de réservation. Pour l'instant, la page n'affiche qu'un bouton et une description. Elle doit maintenant accueillir des champs pour le prénom, le nom et le nombre de personnes.
Remplacer le contenu par une grille
Le bouton Book et la description ne servent plus à rien dans cette page. Ce que l'on veut ici est un formulaire. On commence donc par créer une grille, puis on la dimensionne.
Le prénom et le nom
La première colonne contient le prénom. Il est placé dans un élément de liste, avec un label et un champ de saisie. Ce champ reçoit son type, un attribut ngModel, un name et l'exigence required.
Pour le nom, on copie cette colonne et on adapte son contenu. Les deux champs sont ainsi construits de la même façon.
Le nombre de voyageurs
Pour le nombre de voyageurs, le champ de saisie est remplacé par un ion-select. Ce composant fonctionne comme un champ de saisie et se paramètre de la même manière. Sa valeur par défaut est 1.
Les options sont ensuite ajoutées avec ion-select-option, pour les valeurs 1, 2 et 3.
<ion-select-option value="1">1</ion-select-option>
<ion-select-option value="2">2</ion-select-option>
<ion-select-option value="3">3</ion-select-option>En résumé
Le formulaire de réservation commence par le prénom, le nom et le nombre de voyageurs. Chaque champ utilise ngModel, un name et required. Le nombre de voyageurs passe par un ion-select qui propose les valeurs 1, 2 et 3. La leçon suivante ajoute les dates de la réservation.
Points clés
- Le bouton Book et la description sont remplacés par un formulaire.
- Le prénom et le nom utilisent un label et un champ de saisie.
- Chaque champ reçoit ngModel, un name et required.
- Le nombre de voyageurs utilise un ion-select avec la valeur par défaut 1.
- Les options 1, 2 et 3 sont proposées dans la liste.
Questions fréquentes
Pourquoi utiliser un ion-select pour le nombre de voyageurs ?
Un select propose une liste de valeurs prédéfinies, ici 1, 2 ou 3, ce qui limite les erreurs de saisie.
À quoi sert l'attribut name ?
Il donne un nom au champ, pour que le formulaire puisse retrouver sa valeur.
Que signifie required ?
Le champ doit être rempli pour que le formulaire soit valide.