6. Ajouter un Formulaire (Exemple Pratique)

L’objectif

Nous venons d’ajouter un formulaire d’inscription simple (Nom, Prénom, Email, Téléphone) dans le premier onglet (Tab1). Voici comment j’ai procédé.

Les étapes réalisées

1. Modification de l’interface (tab1.page.html) : J’ai remplacé le message par défaut de l’onglet par le code HTML du formulaire que vous avez fourni. Ce code utilise les balises spécifiques d’Ionic (comme <ion-item>, <ion-label>, <ion-input>).

2. Mise à jour de la logique (tab1.page.ts) : Parce que ce projet utilise la nouvelle version d’Angular (composants “Standalones”), chaque fichier doit importer précisément ce dont il a besoin. J’ai donc ajouté les imports suivants :

   • FormsModule d’Angular : indispensable pour que les éléments comme ngForm et ngModel (utilisés dans votre code) fonctionnent.
   • Les composants d’Ionic : IonItem, IonLabel, IonInput, IonButton afin qu’Angular comprenne ces balises.

3. Ajout de style (tab1.page.scss) : J’ai ajouté un peu d’espacement (padding) via la classe .form-padding et un petit espace au-dessus du bouton pour rendre l’interface plus aérée.