33. Récupérer les valeurs entrées par les utilisateurs

34. Les variables référencées dans le template

Imaginons que l’on veuille récupérer une valeur entrée par un utilisateur, par exemple un nom qu’il rentre dans un champ texte, puis afficher cette valeur à l’écran, avec un message du type « Bonjour, Jean » ou « Bonjour, Juliette« .

Pour le moment, nous ne savons pas comment récupérer cette valeur ! 😮

Eh bien, rassurez-vous, Angular met à disposition un objet représentant un événement du DOM à travers la variable $event.

Les lignes importantes du composant présenté dans la vidéo sont :

  • A la ligne 6: dans le template, à chaque fois que l’utilisateur déclenche l’événement keyup, c’est-à-dire qu’il tape du texte dans le champ texte, alors la méthode onKey($event) est appelée, avec en paramètre un objet représentant l’événement soulevé.
  • A la ligne 16: Notre méthode traite l’événement soulevé par l’utilisateur, en mettant à jour la propriété value de notre composant. Ces modifications sont ensuite répercutées directement sur le template.

NOTE: any est un type propre à TypeScript, qui signifie simplement « n’importe quel type ».

La structure de l’objet $event est déterminée à l’avance, quel que soit l’événement soulevé, car cet objet représente un événement standard du DOM. Il contient des propriétés et des méthodes communes à tout événement. Ainsi, $event.target renvoie un objet de type HTMLInputElement (un champ texte), qui possède une propriété value, qui contient les données entrées par l’utilisateur. On peut donc bien accéder aux données entrées par l’utilisateur depuis nos composants.

Cependant, pour l’instant notre code est minimaliste, nous n’avons typé aucune variable de notre composant, afin d’en simplifier la lecture. Dans la réalité nous préférons avoir un typage fort, c’est-à-dire un typage le plus précis possible.

Le problème, c’est que maintenant on se rend compte que notre code prend en compte les détails de l’objet $event, alors que cela ne concerne pas directement notre composant. Le code n’est pas très lisible, et nous devons gérer des objets qui ne concernent pas directement notre application !

Heureusement, nous allons voir une méthode pour résoudre ce problème.

Et mais on n’a vu tout ça pour rien ?

Non, maintenant vous aurez vu comment cela fonctionne de l’intérieur, et vous êtes capable d’interagir avec n’importe quel événement du DOM depuis votre composant ! 😉

34. Les variables référencées dans le template

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s