Ionic - 10.12 Terminer le formulaire de nouvelle offre
Cette leçon termine le formulaire de nouvelle offre. Le titre reste sans message d'erreur, mais la description reçoit une règle précise : elle doit contenir entre 1 et 180 caractères. Le bouton d'envoi ne devient actif que lorsque le formulaire est valide.
Afficher le message d'erreur de la description
On ajoute une ligne et une colonne sous le champ de description, avec les mêmes tailles que les autres. Elle contient un paragraphe qui explique que la description doit comporter entre 1 et 180 caractères.
Le message n'apparaît que si le champ est invalide et qu'il a déjà été utilisé. La condition est écrite avec la directive ngIf, qui lit le champ description dans le formulaire.
Tester les différents cas
Sans texte, le message apparaît. Avec un texte normal, il disparaît. Avec plus de 180 caractères, il réapparaît lorsque l'on quitte le champ.
Désactiver le bouton
Le bouton d'envoi reçoit une condition qui le désactive tant que le formulaire n'est pas valide. Il apparaît alors grisé, et devient cliquable dès que les valeurs sont correctes.
La leçon suivante traitera la modification de ce formulaire.
En résumé
La description affiche un message d'erreur seulement lorsqu'elle est invalide et utilisée. Ce message disparaît pour un texte valide et réapparaît au-delà de 180 caractères. Le bouton reste grisé tant que le formulaire est invalide.
Points clés
- La description doit comporter entre 1 et 180 caractères.
- Le message s'affiche seulement si le champ est invalide et utilisé.
- Un texte valide fait disparaître le message.
- Au-delà de 180 caractères, le message réapparaît en quittant le champ.
- Le bouton est grisé tant que le formulaire est invalide.
Questions fréquentes
Pourquoi le message n'apparaît-il pas dès l'ouverture ?
Parce que le champ n'a pas encore été utilisé. L'erreur n'est affichée qu'après une interaction.
Que se passe-t-il si la description est trop longue ?
Le champ devient invalide. Le message réapparaît et le bouton reste grisé.
Le titre a-t-il un message d'erreur ?
Pas dans cette leçon. Seul le champ de description reçoit un message.