Angular - 2.20-Exercice2
Vous avez beaucoup appris sur la liaison de données ! Il est temps de le mettre en pratique. Dans ce travail, vous allez utiliser les différentes formes de Databinding et voir comment vous pouvez les utiliser dans votre application.
Alors, avez-vous réussi ? Voici ma solution. Nous devrions ajouter un champ de saisie. Donc je vais ajouter une ligne horizontale encore une fois juste pour avoir une certaine séparation, et ensuite mon champ de saisie. Le label, bien sûr, est facultatif. Je veux que l'utilisateur entre son username. Ajoutons donc un input qui reçoit cette classe form-control. Si nous sauvegardons ceci et jetons un coup d'œil à notre application voilà à quoi elle ressemble.
Maintenant, si vous ne voulez pas l'avoir directement sur les bords, vous pouvez bien sûr y ajouter un peu de style bootstrap. On pourrait mettre un conteneur avec une rangée à l'intérieur et ensuite vous appelez la classe XS 12. N'hésitez pas à insérer votre contenu là-dedans. Ce n'est pas nécessaire pour la solution de ce problème, bien sûr.
Donc avec ça, nous avons notre champ d'entrée ici avec le username. Maintenant, nous allons lier ce username à une propriété de notre fichier TypeScript. Donc, ici, je vais ajouter une nouvelle propriété à mon composant d'application et je vais nommer cette propriété "username". Ce sera une chaîne et je vais la définir comme une chaîne vide, comme ceci.
Maintenant, nous avons appris que nous pouvons utiliser la liaison bidirectionnelle pour se lier à cela. Donc sur mon input ici, je vais ajouter une liaison bidirectionnelle en ajoutant des crochets, puis des parenthèses. C'est cette syntaxe de liaison bidirectionnelle, et ensuite le ngModel. Maintenant, avec cela ajouté, je peux me lier à mon username comme ceci.
Maintenant, important : pour que le ngModel fonctionne, vous devez vous assurer que dans votre module d'application, vous avez ajouté FormsModule aux importations parce que la directive NG model fait techniquement partie du FormsModule fourni par Angular. Donc, assurez-vous que vous avez ceci. Vous devriez l'avoir là par défaut quand vous utilisez un projet CLI. Et avec cela, nous devrions mettre à jour le username à chaque touche entrée.
Maintenant pour être capable de voir ça, je vais ajouter un paragraphe en dessous de l'input. Et ici je veux sortir "username". Maintenant que c'est sorti ici on peut sauvegarder ça. NG Serve devrait fonctionner, bien sûr. Et nous devrions voir que si j'entre "supermax" ici, on le voit en dessous de l'entrée. Les deux premières tâches sont donc résolues.
Maintenant, ajoutons le bouton. Donc nous allons ajouter un bouton sous le paragraphe où je vais dire "reset user". Et ce bouton va d'abord recevoir quelques classes bootstrap, btn btn primary pour le rendre agréable à voir. Mais plus important encore, nous devrions le désactiver si le username est vide.
Maintenant, comment pouvons-nous faire cela ? Nous avons appris que nous pouvons utiliser la liaison bidirectionnelle pour lier notre input à une variable. Pour cela, nous allons ajouter des crochets suivis de parenthèses à notre input, conformément à la syntaxe de la liaison bidirectionnelle, puis nous ajoutons ngModel. Maintenant, avec cela ajouté, nous pouvons lier notre username.
Cependant, pour que ngModel fonctionne, nous devons nous assurer que FormsModule est ajouté aux importations de notre module d'application, car la directive ngModel fait techniquement partie de FormsModule fourni par Angular. Assurez-vous que vous l'avez dans votre projet CLI par défaut.
Avec cela, nous pouvons mettre à jour le username à chaque touche entrée. Pour le vérifier, nous allons ajouter un paragraphe sous l'input et afficher "username" dans ce paragraphe.
Pour ajouter un bouton, nous allons ajouter un bouton sous le paragraphe, avec des classes bootstrap, btn, et btn-primary pour l'esthétique. Mais plus important encore, nous allons le désactiver si le username est vide. Pour cela, nous pouvons lier la propriété "disabled" à une expression qui renvoie true ou false. Dans notre cas, nous vérifions si le username est une chaîne vide, et désactivons le bouton en conséquence.
Nous devrions également ajouter un écouteur de clic à ce bouton afin de réinitialiser le username une fois que nous avons cliqué dessus. Pour cela, nous cherchons l'événement avec des parenthèses normales, trouvons "click", et appelons la méthode reset, où nous mettons le username à une chaîne vide.
Avec tout cela en place, nous devrions être en mesure de revenir à l'application, entrer "supermax" dans l'input, puis cliquer sur "Reset User" pour réinitialiser le username et désactiver le bouton. Cela résout notre problème de liaison de données
.