Ionic - 10.9 Terminer le formulaire d'offre

Cette leçon termine le formulaire de création d'offre. Elle ajoute un champ de date avec une valeur minimale et une valeur maximale, puis un bouton d'enregistrement dans l'en-tête. Le résultat doit afficher la date dans les bornes demandées.

Ajouter les champs de date

Le champ de date suit la même structure que les autres : une colonne, un élément et un label. Il utilise en revanche le composant ion-datetime, qui permet de choisir une date.

Les bornes peuvent être dynamiques ou fixes. Ici, elles sont fixées en dur : la date minimale est le jour même, et la date maximale est une date future que l'utilisateur ne peut pas dépasser. Les dates de départ et de fin occupent chacune une colonne de taille 3.

Créer le bouton d'enregistrement

Le bouton de l'en-tête reçoit un écouteur de clic qui appelle la méthode onCreateOffer. Il n'affiche qu'une icône, grâce au slot icon-only, avec le nom checkmark.

Pour l'instant, la méthode affiche simplement un message dans la console. Le CSS devenu inutile a été supprimé. Le résultat montre la date avec le minimum et le maximum demandés.

<ion-button (click)="onCreateOffer()">
  <ion-icon name="checkmark" slot="icon-only"></ion-icon>
</ion-button>

En résumé

Le formulaire d'offre reçoit des champs de date bornés entre aujourd'hui et une date future. Le bouton d'en-tête utilise une icône seule, et la méthode onCreateOffer sera complétée plus tard. Le CSS inutile a été retiré. La leçon suivante aborde la création d'un formulaire réactif.

Points clés

• Le composant ion-datetime permet de choisir une date.
• La date minimale est fixée au jour même, et la date maximale est une date future.
• Le bouton d'en-tête n'affiche qu'une icône, grâce au slot icon-only.
• Le clic sur le bouton appelle la méthode onCreateOffer.
• Le CSS qui n'est plus utile a été supprimé.

Questions fréquentes

Pourquoi fixer une date minimale et une date maximale ?

Elles empêchent l'utilisateur de choisir une date hors de la période prévue pour l'offre.

Quelle différence entre un bouton à icône seule et un bouton avec texte ?

Avec icon-only, seule l'icône apparaît dans le bouton, sans texte.

Que fait le bouton pour le moment ?

Il appelle onCreateOffer, qui affiche un message dans la console. L'enregistrement réel sera ajouté plus tard.