Ionic - 10.6 Basculer entre les modes connexion et inscription

Cette leçon montre comment passer du mode connexion au mode inscription dans le même formulaire. Un bouton déclenche la bascule, et une propriété garde en mémoire le mode actif. Le titre et le bouton se mettent à jour automatiquement à chaque changement.

Déclencher la bascule avec un bouton

Le bouton reçoit un écouteur de clic qui appelle une méthode de bascule. Cette méthode modifie simplement le mode du formulaire.

La page démarre en mode connexion. Une propriété isLogin est donc initialisée à true. À chaque clic, la méthode remplace sa valeur par son inverse.

isLogin = true;
this.isLogin = !this.isLogin;

Afficher le bon texte selon le mode

Dans le modèle HTML, le texte du bouton dépend de la valeur de isLogin. Si isLogin vaut true, le bouton propose de passer en mode inscription. Sinon, il propose de revenir à la connexion.

Le titre fonctionne à l'inverse : il indique le mode dans lequel on se trouve. Le résultat correspond à ce qui était attendu, avec le titre en haut et le bouton qui propose l'autre mode.

En résumé

La bascule repose sur une propriété booléenne isLogin, initialisée à true, et sur une méthode qui l'inverse. Le titre et le bouton s'adaptent à cette valeur. La leçon suivante termine le formulaire d'authentification.

Points clés

• Un écouteur de clic relie le bouton à la méthode de bascule.
• La propriété isLogin indique si l'on est en mode connexion.
• La méthode remplace la valeur par son inverse à chaque clic.
• Le texte du bouton propose toujours l'autre mode.
• Le titre indique le mode actuel.

Questions fréquentes

Pourquoi isLogin commence-t-il à true ?

La page démarre en mode connexion, donc la valeur initiale doit correspondre à ce mode.

Comment la valeur change-t-elle ?

La méthode écrit l'inverse de la valeur actuelle : une valeur true devient false, et inversement.

Le bouton change-t-il selon le mode ?

Oui. Il est lié à la propriété et affiche le texte correspondant à l'autre mode.