Interactions avancées entre composants

Dans le chapitre Les composants en détail, nous avons vu le fonctionnement des formulaires et abordé la question de la validation des données sous-jacentes. Cependant, dans notre formulaire exemple, certaines faiblesses existent au niveau de cette validation. Par exemple, si l’utilisateur clique sur Valider et si des erreurs de saisie sont détectées, le bouton Valider reste actif alors même que les erreurs n’ont pas encore été corrigées.

Nous n’avons pas encore vu d’autres moyens que le two-way data binding pour permettre à un composant enfant de déclencher dynamiquement une action au sein d’un composant parent. Voyons maintenant comment améliorer nos formulaires et la communication entre composants.

1. Empêcher la validation d’un formulaire

Pour le moment, notre formulaire possède des éléments de validation qui affichent un message d’erreur (sous les champs ou sous forme de résumé) et cela empêche le formulaire d’être envoyé. Néanmoins, le bouton de validation du formulaire reste actif et cela pourrait nuire à l’expérience utilisateur globale. Il serait appréciable d’avoir un moyen de désactiver le bouton tant que tous les champs ne sont pas corrigés.

Une des possibilités serait de gérer soi-même les changements de chaque champ et de modifier un booléen...

Pour consulter la suite, découvrez le livre suivant :
couv_EIBLAZ.png
60-signet.svg
En version papier
20-ecran_lettre.svg
En version numérique
41-logo_abonnement.svg
En illimité avec l'abonnement ENI
130-boutique.svg
Sur la boutique officielle ENI
Précédent
Communication HTTP
Suivant
Exercice