1 00:00:03,170 --> 00:00:05,820 Maintenant que nous avons appris sur le support de validation de formulaire basé sur le modèle 2 00:00:05,820 --> 00:00:11,165 dans Angular dans la conférence précédente, 3 00:00:11,165 --> 00:00:14,625 appliquons ce que nous avons appris à 4 00:00:14,625 --> 00:00:18,330 le formulaire de connexion que nous avons conçu dans l'exercice précédent. 5 00:00:18,330 --> 00:00:21,395 Nous ferons une simple validation de formulaire pour le formulaire de connexion. 6 00:00:21,395 --> 00:00:26,160 En particulier, nous spécifierons le nom d'utilisateur et le mot de passe requis, 7 00:00:26,160 --> 00:00:32,430 , puis vérifierons que l'utilisateur saisit les informations dans ces champs, 8 00:00:32,430 --> 00:00:37,125 et sera en mesure d'afficher des messages d'erreur lorsque les champs sont vides. 9 00:00:37,125 --> 00:00:46,180 Poursuivons cette modification de l'application dans cet exercice. 10 00:00:46,180 --> 00:00:49,215 Pour commencer à cet exercice, 11 00:00:49,215 --> 00:00:53,600 allons au formulaire de connexion ici, 12 00:00:53,600 --> 00:00:57,090 que nous avons dans le modèle de composants de connexion ici. 13 00:00:57,090 --> 00:01:02,400 Nous avons déjà ajouté dans l'attribut novalidate au formulaire de connexion. 14 00:01:02,400 --> 00:01:10,780 Donc, ajoutons dans la variable de modèle appelée LogInform à ce modèle, 15 00:01:10,780 --> 00:01:18,835 , puis définissons ceci à ngForm comme nous l'avons compris dans la conférence précédente ici. 16 00:01:18,835 --> 00:01:20,170 Donc, en faisant cela, 17 00:01:20,170 --> 00:01:26,500 nous spécifions que cette variable de modèle nous permet de suivre l'état du formulaire. 18 00:01:26,500 --> 00:01:31,330 Donc, nous pouvons même vérifier l'état valide ou non valide pour ce formulaire. 19 00:01:31,330 --> 00:01:34,485 Maintenant, en plus, pour chacune de ces entrées, 20 00:01:34,485 --> 00:01:43,620 nous allons également ajouter dans les variables de modèle correspondantes ici. 21 00:01:43,620 --> 00:01:45,220 Alors, laissez-moi passer à la ligne suivante ici, 22 00:01:45,220 --> 00:01:52,670 et là je dirai que le nom d'utilisateur est ngModel. 23 00:01:52,670 --> 00:01:58,360 Ensuite, nous allons également spécifier ceci comme requis ici. 24 00:01:58,360 --> 00:02:00,660 De même, pour le mot de passe, 25 00:02:00,660 --> 00:02:09,545 nous allons ajouter dans la variable de modèle correspondante ici comme mot de passe est dans ngModel, 26 00:02:09,545 --> 00:02:15,700 et ensuite spécifier ceci comme requis ici. 27 00:02:15,700 --> 00:02:19,700 Donc, maintenant que nous avons spécifié les variables de modèle, 28 00:02:19,700 --> 00:02:23,870 nous pouvons ensuite effectuer certaines vérifications de validation de formulaire ici. 29 00:02:23,870 --> 00:02:26,490 Maintenant, parce que nous spécifions cela comme requis, 30 00:02:26,490 --> 00:02:28,280 cela signifie que si ces champs, 31 00:02:28,280 --> 00:02:30,455 les champs d'entrée sont vides, 32 00:02:30,455 --> 00:02:34,525 alors l'erreur requise sera signalée pour cela. 33 00:02:34,525 --> 00:02:40,105 De même, maintenant que nous avons la variable de modèle pour le formulaire, 34 00:02:40,105 --> 00:02:47,380 nous pouvons facilement l'utiliser pour vérifier et désactiver le bouton Soumettre ci-dessous. 35 00:02:47,380 --> 00:02:49,255 Donc, pour le bouton Soumettre, 36 00:02:49,255 --> 00:02:53,270 ce que nous faisons ici est d'utiliser 37 00:02:53,270 --> 00:03:01,080 le champ désactivé ici, 38 00:03:01,080 --> 00:03:03,500 et ensuite nous allons définir le champ désactivé 39 00:03:03,500 --> 00:03:12,270 à Loginform.form.Invalid. 40 00:03:12,270 --> 00:03:14,030 Donc, en faisant cela, 41 00:03:14,030 --> 00:03:18,030 , nous allons désactiver ce bouton lorsque le formulaire n'est pas valide. 42 00:03:18,030 --> 00:03:23,925 Ainsi, l'utilisateur ne peut même pas soumettre le formulaire lorsque le formulaire contient une entrée non valide. 43 00:03:23,925 --> 00:03:27,355 Donc, par exemple, si le nom d'utilisateur est vide ou le mot de passe est vide, 44 00:03:27,355 --> 00:03:29,520 alors le formulaire de connexion sera invalide, 45 00:03:29,520 --> 00:03:32,290 et donc l'utilisateur ne peut pas soumettre ce formulaire. 46 00:03:32,290 --> 00:03:36,950 Maintenant, c'est une partie de la validation du formulaire que nous pouvons faire, 47 00:03:36,950 --> 00:03:40,385 par laquelle nous pouvons empêcher le formulaire d'être soumis. 48 00:03:40,385 --> 00:03:43,285 De plus, pour chacun de ces champs, 49 00:03:43,285 --> 00:03:47,945 , nous pouvons même afficher un message d'erreur pour 50 00:03:47,945 --> 00:03:53,875 indiquer quel type d'erreur se produit dans ce champ particulier. 51 00:03:53,875 --> 00:03:55,309 Donc, pour ce faire, 52 00:03:55,309 --> 00:03:58,230 à chacun de ces éléments de champ de formulaire, 53 00:03:58,230 --> 00:04:07,650 nous allons ajouter la balise mat-error là, 54 00:04:07,650 --> 00:04:12,270 et ensuite nous dirons stop nGiF, 55 00:04:12,270 --> 00:04:18,345 et nous dirons username.errors. 56 00:04:18,345 --> 00:04:23,920 Donc, notez que nous avons déjà donné à ce modèle une variable appelée username, 57 00:04:23,920 --> 00:04:28,665 afin que nous puissions utiliser dans username.errors s'il y a des erreurs et 58 00:04:28,665 --> 00:04:34,930 si ce type d'erreur est nécessaire. 59 00:04:34,930 --> 00:04:41,810 Donc, si l'erreur est un type d'erreur requis qui est la cause là, 60 00:04:41,810 --> 00:04:44,060 alors à ce stade, 61 00:04:44,060 --> 00:04:54,140 nous pouvons spécifier que l'erreur correspondante à afficher est le nom d'utilisateur est nécessaire. 62 00:04:54,140 --> 00:04:59,305 Donc, c'est l'erreur qui va être affichée pour ce champ ici. 63 00:04:59,305 --> 00:05:03,810 De même, permettez-moi d'ajouter le même genre de chose pour le champ de mot de passe ici. 64 00:05:03,810 --> 00:05:06,610 Alors, laissez-moi copier cela et ensuite coller ici, 65 00:05:06,610 --> 00:05:09,110 et ensuite nous dirons mot de passe .errors. 66 00:05:09,110 --> 00:05:17,395 Ensuite, le message sera mot de passe est requis. 67 00:05:17,395 --> 00:05:19,070 Donc, en ajoutant ceci, 68 00:05:19,070 --> 00:05:22,535 , nous afficherons des messages d'erreur en dessous de 69 00:05:22,535 --> 00:05:27,665 ces champs lorsque le champ ne contient aucune information. 70 00:05:27,665 --> 00:05:29,950 Correction mineure ici. 71 00:05:29,950 --> 00:05:34,820 Cela devrait être un nom d'utilisateur ?errors.Requis ici, 72 00:05:34,820 --> 00:05:38,470 et de même, celui-ci devrait également être .Requis ici. 73 00:05:38,470 --> 00:05:40,375 Donc, avec ces modifications, 74 00:05:40,375 --> 00:05:43,280 mon composant login est maintenant prêt 75 00:05:43,280 --> 00:05:47,275 pour faire la validation du formulaire, puis afficher des messages d'erreur. 76 00:05:47,275 --> 00:05:52,505 Alors, sauvegardons les modifications, puis allons jeter un oeil à l'application mise à jour. 77 00:05:52,505 --> 00:05:55,705 En allant à notre application dans le navigateur, 78 00:05:55,705 --> 00:05:58,475 ouvrons le formulaire de connexion ici. 79 00:05:58,475 --> 00:06:01,720 Donc, vous pouvez voir que maintenant le nom d'utilisateur et le mot de passe portent 80 00:06:01,720 --> 00:06:05,355 une étoile pour indiquer qu'ils sont tous les deux requis. 81 00:06:05,355 --> 00:06:07,550 Alors, laissez-moi taper. 82 00:06:09,870 --> 00:06:16,130 Donc, ici, vous voyez que le formulaire est valide car il contient des informations, 83 00:06:16,130 --> 00:06:20,375 et donc le bouton Connexion sera activé. 84 00:06:20,375 --> 00:06:24,840 Permettez-moi de supprimer les informations du champ de mot de passe, 85 00:06:24,840 --> 00:06:27,950 et puis vous remarquez immédiatement que 86 00:06:27,950 --> 00:06:32,405 l'erreur est indiquée ici indiquant que le mot de passe est requis. 87 00:06:32,405 --> 00:06:37,040 Notez également que le bouton Connexion ne sera plus activé. 88 00:06:37,040 --> 00:06:40,760 Il sera désactivé. Donc, vous ne serez pas en mesure de soumettre le formulaire ici. 89 00:06:40,760 --> 00:06:43,960 Mais dès que je saisis quelque chose dans le mot de passe, 90 00:06:43,960 --> 00:06:47,060 puis le bouton Login sera activé, 91 00:06:47,060 --> 00:06:49,670 et nous serons en mesure de soumettre le formulaire ici. 92 00:06:49,670 --> 00:06:51,390 De même pour le nom d'utilisateur. 93 00:06:51,390 --> 00:06:55,045 Si je supprime les informations de nom d'utilisateur là-bas, 94 00:06:55,045 --> 00:06:58,115 alors vous verrez l'erreur s'afficher ici, 95 00:06:58,115 --> 00:07:04,670 et aussi vous verrez que le bouton Connexion n'est pas activé à ce stade. 96 00:07:04,670 --> 00:07:10,270 Donc, c'est ainsi que la validation du formulaire peut être effectuée dans ce cas. 97 00:07:10,270 --> 00:07:12,170 Donc, comme vous l'avez vu, 98 00:07:12,170 --> 00:07:15,960 en ajoutant en simple validation de forme à notre application, 99 00:07:15,960 --> 00:07:18,515 nous pouvons vérifier pour nous assurer que 100 00:07:18,515 --> 00:07:22,925 les champs contiennent les informations qu'ils sont supposés contenir, 101 00:07:22,925 --> 00:07:24,725 et dans le bon format. 102 00:07:24,725 --> 00:07:30,290 Nous allons examiner un peu plus de ce que la validation des formulaires dans l'un des exercices ultérieurs, 103 00:07:30,290 --> 00:07:33,020 en particulier pour les formes réactives. 104 00:07:33,020 --> 00:07:35,945 Avec cela, nous terminons cet exercice. 105 00:07:35,945 --> 00:07:38,840 C'est le bon moment pour vous de faire un commit git 106 00:07:38,840 --> 00:07:43,080 avec les formulaires pilotés par un modèle de message, deuxième partie.