Ionic - 10.7 Terminer le formulaire d'authentification

Cette leçon termine le formulaire d'authentification. Elle montre comment vérifier la validité du formulaire, lire les champs e-mail et mot de passe, puis afficher leurs valeurs. La requête vers le serveur viendra plus tard.

Vérifier la validité avant tout traitement

Dans la méthode onSubmit, on commence par vérifier que le formulaire est valide. Si ce n'est pas le cas, la méthode s'arrête grâce à return.

Cette vérification est une simple précaution, car ce cas ne devrait normalement pas se produire.

onSubmit(form: NgForm) {
  if (!form.valid) {
    return;
  }
}

Récupérer les valeurs des champs

Dans le HTML, les champs ont reçu les noms email et password. Il suffit donc de réutiliser ces noms dans la méthode pour lire leur valeur à partir du formulaire.

Chaque valeur est placée dans une variable. Une condition vérifie ensuite si l'on est en mode connexion. La requête vers le serveur sera ajoutée plus tard, et le cas de l'inscription sera traité à sa suite. Pour l'instant, les valeurs sont affichées dans la console.

const email = form.value.email;
const password = form.value.password;

En résumé

Le formulaire d'authentification vérifie sa validité, puis lit les valeurs des champs e-mail et mot de passe. Un mot de passe de moins de six caractères n'est pas validé. Les valeurs sont affichées dans la console, en attendant la requête vers le serveur. La leçon suivante ouvre le formulaire d'offre.

Points clés

• La méthode onSubmit commence par vérifier la validité du formulaire.
• Les valeurs se lisent grâce aux noms donnés aux champs.
• Un mot de passe de moins de six caractères n'est pas validé.
• Le mode connexion et le mode inscription seront traités séparément.
• Les valeurs affichées dans la console confirment que le formulaire fonctionne.

Questions fréquentes

Pourquoi vérifier la validité si le bouton est déjà contrôlé ?

C'est une simple précaution. Ce cas ne devrait pas se produire, mais la vérification évite de continuer avec un formulaire invalide.

Comment récupérer la valeur d'un champ ?

On utilise la propriété du formulaire qui correspond au name du champ, par exemple email ou password.

Que se passe-t-il pour le moment après l'envoi ?

Les valeurs sont affichées dans la console. La requête vers le serveur sera ajoutée dans une étape ultérieure.