1 00:00:00,000 --> 00:00:04,735 [MUSIQUE] 2 00:00:04,735 --> 00:00:09,734 Maintenant que nous avons eu une introduction rapide à la validation de formulaire réactif dans 3 00:00:09,734 --> 00:00:14,901 la conférence précédente, passons à l'exercice suivant où nous pourrions 4 00:00:14,901 --> 00:00:20,926 appliquer la validation de formulaire à la forme réactive que nous avons créée dans l'exercice précédent. 5 00:00:20,926 --> 00:00:26,101 Donc, en allant dans notre fichier de texte de composant de contact, 6 00:00:26,101 --> 00:00:34,463 ajoutons dans les validateurs de formulaire à chacune de ces propriétés dans notre modèle de formulaire. 7 00:00:34,463 --> 00:00:42,264 Donc, pour le prénom, je dirais dans le tableau, Validators. 8 00:00:45,794 --> 00:00:50,830 Requis, De même, je vais 9 00:00:50,830 --> 00:00:55,977 appliquer la même chose à la, lastname. 10 00:00:58,032 --> 00:01:02,361 Puis email, et aussi pour le telnum, donc pour 11 00:01:02,361 --> 00:01:09,030 le telnum je dirais pour les trois restants que je peux les laisser ouverts, 12 00:01:09,030 --> 00:01:16,066 parce que je suis d'accord avec soit être faux ou vrai et leur donner d'autres valeurs. 13 00:01:16,066 --> 00:01:21,117 Parce que c'est un léger bascule et contacttype ne peut prendre qu'un 14 00:01:21,117 --> 00:01:26,166 des trois valeurs et la valeur par défaut est déjà donnée là, 15 00:01:26,166 --> 00:01:30,470 et pour le message, nous pouvons le rendre pas une valeur requise. 16 00:01:30,470 --> 00:01:32,595 Si l'utilisateur ne veut pas taper de commentaires, 17 00:01:32,595 --> 00:01:36,030 vous pouvez lui permettre de ne pas taper de commentaires, mais si vous le souhaitez, 18 00:01:36,030 --> 00:01:39,619 vous pouvez ajouter les validators.Requis même pour le message. 19 00:01:39,619 --> 00:01:46,890 De plus, lorsque vous réinitialisez le formulaire dans la méthode onSubmit ici 20 00:01:46,890 --> 00:01:52,910 , vous pouvez également réinitialiser le formulaire à sa valeur initiale comme nous l'avons spécifié 21 00:01:52,910 --> 00:01:57,630 dans la méthode où nous avons créé le formulaire. 22 00:01:57,630 --> 00:02:05,100 Donc, dans la valeur de réinitialisation, il prend un objet comme paramètre ici. 23 00:02:05,100 --> 00:02:10,479 Cet objet sera utilisé par la méthode reset en utilisant 24 00:02:10,479 --> 00:02:17,447 la méthode set value que nous avons vu dans la conférence plus tôt pour réinitialiser 25 00:02:17,447 --> 00:02:24,192 la forme à la condition telle qu'elle était quand elle est créée à l'origine. 26 00:02:24,192 --> 00:02:28,467 Donc, ici, nous pouvons fournir des paramètres 27 00:02:28,467 --> 00:02:35,442 comme prénom : '', 28 00:02:35,442 --> 00:02:41,745 lastname : '', telnum : 0, 29 00:02:43,660 --> 00:02:47,219 Puis email : '', 30 00:02:49,160 --> 00:02:53,690 agree : false, 31 00:02:53,690 --> 00:03:01,132 contacttype : 'Aucun', 32 00:03:01,132 --> 00:03:07,940 message : '' '}) ;. 33 00:03:07,940 --> 00:03:11,206 Donc, ces valeurs que nous avons fournies dans cet objet JavaScript 34 00:03:14,042 --> 00:03:19,081 que nous nous donnons le paramètre de la méthode reset 35 00:03:19,081 --> 00:03:23,514 auront exactement les mêmes valeurs que nous avons vu pour 36 00:03:23,514 --> 00:03:28,168 ces propriétés lorsque nous avons créé ce formulaire de rétroaction. 37 00:03:28,168 --> 00:03:32,325 Nous devons également réinitialiser complètement le formulaire dans le modèle. 38 00:03:32,325 --> 00:03:36,532 Donc, pour ce faire, pour revenir à l'importation ici, et 39 00:03:36,532 --> 00:03:43,130 alors nous importerons également le viewChild} de '@angular /core' ;. 40 00:03:43,130 --> 00:03:45,950 Cela nous permettra d'avoir accès à 41 00:03:45,950 --> 00:03:49,910 n'importe quel élément dom enfant dans mon modèle. 42 00:03:49,910 --> 00:03:54,054 Donc, après avoir fait cela, entrant dans le code, 43 00:03:54,054 --> 00:03:59,321 ici dans le ContactComponent, je peux dire @ViewChild, 44 00:03:59,321 --> 00:04:09,088 et ensuite je serai capable de me référer au FeedbackForm en lui donnant une variable de modèle avec le nom fform. 45 00:04:09,088 --> 00:04:14,698 Vous allez le faire à l'étape suivante, et puis pour cela, 46 00:04:14,698 --> 00:04:19,770 je vais faire référence à cela en utilisant FeedbackFormDirective. 47 00:04:21,890 --> 00:04:27,030 Ainsi, cela nous permet d'accéder au formulaire de modèle, puis de le réinitialiser complètement 48 00:04:27,030 --> 00:04:34,200 , de sorte que le formulaire lui-même soit réinitialisé à sa valeur immaculée. 49 00:04:34,200 --> 00:04:38,710 C'est donc une autre étape supplémentaire que nous devons faire pour nous assurer que le formulaire est 50 00:04:38,710 --> 00:04:43,470 complètement réinitialisé à sa valeur initiale ici. 51 00:04:43,470 --> 00:04:50,268 Maintenant, après avoir fait cela dans la méthode onSubject, après avoir réinitialisé l'objet feedbackForm 52 00:04:53,241 --> 00:04:58,669 lui-même ici, nous devons également ajouter 53 00:04:58,669 --> 00:05:06,242 dans this.feedbackFormDirective.resetForm () ; 54 00:05:08,355 --> 00:05:10,060 . 55 00:05:10,060 --> 00:05:15,045 Donc, cela garantira que mon feedbackForm est complètement réinitialisé à sa valeur 56 00:05:15,045 --> 00:05:18,400 vierge à ce stade. 57 00:05:18,400 --> 00:05:23,273 Donc, après ces changements, allons maintenant dans notre fichier 58 00:05:23,273 --> 00:05:29,050 template pour montrer comment nous pouvons refléter ces erreurs 59 00:05:29,050 --> 00:05:33,630 dans notre modèle pour notre formulaire là-bas. 60 00:05:33,630 --> 00:05:35,730 Donc, passer au fichier de modèle. 61 00:05:35,730 --> 00:05:39,490 Donc, d'abord, nous allons aller sur le bouton ici, et 62 00:05:39,490 --> 00:05:44,705 puis nous allons rendre le bouton désactivé. 63 00:05:46,924 --> 00:05:56,470 Si le « FeedBackForm n'est pas valide ». 64 00:05:56,470 --> 00:06:01,280 Donc, le bouton ne sera activé que lorsque le FeedBackForm est valide. 65 00:06:01,280 --> 00:06:06,403 En passant à ce formulaire, permettez-moi d'ajouter en 66 00:06:06,403 --> 00:06:15,674 le 00:08:22,187 Aller à notre formulaire dans le navigateur, laissez-moi taper le prénom, 85 00:08:22,187 --> 00:08:28,240 et vous voyez que même si je supprime la valeur restera verte, 86 00:08:28,240 --> 00:08:31,501 parce que nous avons utilisé le touché là-bas. 87 00:08:31,501 --> 00:08:36,522 Mais dès que je m'en éloigne alors vous 88 00:08:36,522 --> 00:08:42,586 serez en mesure de voir que cela devient une couleur rouge. 89 00:08:42,586 --> 00:08:47,659 Donc, de même pour le nom de famille, vous verrez que lorsque je 90 00:08:47,659 --> 00:08:54,020 supprime la valeur de nom, alors cela est affiché là de la même manière. 91 00:08:54,020 --> 00:08:57,710 Laissez-moi entrer le prénom et le nom de famille, et pour l'email aussi. 92 00:08:59,736 --> 00:09:07,411 Le, Même cas pour le numéro de téléphone aussi. 93 00:09:07,411 --> 00:09:12,287 Ainsi, vous pouvez faire la validation de formulaire dans notre application. 94 00:09:12,287 --> 00:09:16,943 Avec cela, nous terminons cet exercice où nous avons 95 00:09:16,943 --> 00:09:21,285 ajouté en validation de formulaire à notre formulaire réactif. 96 00:09:21,285 --> 00:09:26,493 C'est le bon moment pour vous de faire un commit git avec le message, 97 00:09:26,493 --> 00:09:28,750 réactif forme la deuxième partie. 98 00:09:28,750 --> 00:09:34,925 [MUSIQUE]