1 00:00:03,650 --> 00:00:09,630 Nous avions traité des formes réactives dans l'une des leçons précédentes, 2 00:00:09,630 --> 00:00:14,420 où nous avons fait deux exercices traitant des formes réactives, 3 00:00:14,420 --> 00:00:15,695 comment nous les créons, 4 00:00:15,695 --> 00:00:20,530 et ensuite faire une validation de forme de base sur les formes réactives. 5 00:00:20,530 --> 00:00:24,525 Nous continuerons avec le thème de cette leçon, 6 00:00:24,525 --> 00:00:28,790 parce que les formes réactives comme son nom l'indique, 7 00:00:28,790 --> 00:00:33,019 a quelque chose à voir avec la programmation réactive comme vous pourriez l'avoir prévu. 8 00:00:33,019 --> 00:00:42,429 Maintenant, les formulaires réactifs vous permettent également de regarder les changements dans les valeurs des éléments de formulaire, 9 00:00:42,429 --> 00:00:48,320 en utilisant un observable que Angular rend disponible appelé ValueChanges. 10 00:00:48,320 --> 00:00:53,450 Nous utiliserons les ValueChanges observables dans cet exercice, 11 00:00:53,450 --> 00:00:57,080 afin de suivre les modifications apportées aux valeurs de 12 00:00:57,080 --> 00:01:01,650 leurs différents éléments de formulaire et de déclencher immédiatement la validation du formulaire. 13 00:01:01,650 --> 00:01:06,350 Dans cet exercice, nous allons faire la plupart de la validation du formulaire dans le code 14 00:01:06,350 --> 00:01:11,120 plutôt que dans le modèle lui-même, 15 00:01:11,120 --> 00:01:19,189 comme nous l'avons fait avec la validation de la forme du réacteur dans le deuxième exercice de formes réactives. 16 00:01:19,189 --> 00:01:24,115 En allant à contact.component.tsfile, 17 00:01:24,115 --> 00:01:29,720 , nous allons mettre à jour le formulaire réactif que nous avons créé ici, 18 00:01:29,720 --> 00:01:34,445 en ajoutant quelques Validators supplémentaires pour certains de ces champs. 19 00:01:34,445 --> 00:01:38,915 Donc, ici vous voyez que pour le prénom et 20 00:01:38,915 --> 00:01:43,465 le numéro de téléphone et email nous avons ajouté les validateurs requis. 21 00:01:43,465 --> 00:01:45,290 Pour le prénom et le nom de famille, 22 00:01:45,290 --> 00:01:48,500 Je vais ajouter quelques Validators supplémentaires pour 23 00:01:48,500 --> 00:01:52,315 la longueur minimale et la longueur maximale. 24 00:01:52,315 --> 00:01:57,185 Maintenant, si vous avez plus d'un Validator dans votre forme réactive, 25 00:01:57,185 --> 00:02:04,470 vous devez les déclarer en utilisant un tableau là-dedans. 26 00:02:04,470 --> 00:02:08,385 Donc, cela doit être enfermé dans un tableau ici. 27 00:02:08,385 --> 00:02:12,790 Donc, vous voyez que j'ai inclus le Validator requis dans un tableau. 28 00:02:12,790 --> 00:02:21,300 Je vais ajouter dans un Validators, MinLength Validator. 29 00:02:21,300 --> 00:02:25,250 Donc, pour la longueur minimale, je vais spécifier deux comme longueur minimale, 30 00:02:25,250 --> 00:02:28,925 donc le prénom devrait contenir au moins deux caractères. 31 00:02:28,925 --> 00:02:36,645 Aussi la longueur maximale que je vais 32 00:02:36,645 --> 00:02:48,035 ajouter comme 25 caractères. 33 00:02:48,035 --> 00:02:52,740 Donc, ici vous voyez que maintenant pour le prénom, nous avons trois Validations différentes, 34 00:02:52,740 --> 00:02:55,455 toutes enfermées dans un tableau ici. 35 00:02:55,455 --> 00:02:58,620 Validateurs requis, Validators MinLength, 36 00:02:58,620 --> 00:03:02,135 et Validators MaxLength ici, 25. 37 00:03:02,135 --> 00:03:05,900 Donc, je vais faire la même chose aussi pour mon nom de famille. 38 00:03:05,900 --> 00:03:11,115 Alors, laissez-moi copier tout ce Rayon Validators ici, 39 00:03:11,115 --> 00:03:21,420 et puis remplacer celui-ci par cet ensemble de Validators. 40 00:03:21,420 --> 00:03:25,330 Maintenant, en outre, pour le numéro de téléphone, 41 00:03:25,330 --> 00:03:29,060 comme vous vous souviendrez dans la version antérieure du formulaire, 42 00:03:29,060 --> 00:03:35,395 le numéro de téléphone était prêt à accepter même les alphabets, 43 00:03:35,395 --> 00:03:37,015 mais ce n'est pas correct. 44 00:03:37,015 --> 00:03:40,070 Les numéros de téléphone sont généralement des numéros. 45 00:03:40,070 --> 00:03:43,955 Donc, c'est là que nous allons utiliser un autre Validator 46 00:03:43,955 --> 00:03:53,005 appelé Pattern Validators. 47 00:03:53,005 --> 00:03:57,890 Donc, le validateur de modèle nous permet de spécifier un motif pour 48 00:03:57,890 --> 00:04:02,719 les valeurs entrées dans cet élément de formulaire particulier, 49 00:04:02,719 --> 00:04:09,465 , puis vérifier pour vous assurer que la valeur suit le modèle spécifié. 50 00:04:09,465 --> 00:04:12,470 Donc, ici, le modèle que nous allons utiliser est que la valeur 51 00:04:12,470 --> 00:04:17,180 ne devrait contenir que des nombres compris entre zéro et neuf. 52 00:04:17,180 --> 00:04:19,015 Pour ajouter le motif, 53 00:04:19,015 --> 00:04:23,860 nous devons le faire dans le fichier template comme nous le verrons dans un court laps de temps. 54 00:04:23,860 --> 00:04:26,415 De même, pour l'email, 55 00:04:26,415 --> 00:04:31,635 J'aurai aussi un autre Validator appelé Validator email. 56 00:04:31,635 --> 00:04:35,035 Donc, nous ajouterons dans l'email Validators. 57 00:04:35,035 --> 00:04:40,010 Cela signifie également que nous devons ajouter un attribut 58 00:04:40,010 --> 00:04:44,990 appelé email à l'entrée dans notre fichier de modèle. 59 00:04:44,990 --> 00:04:53,145 Maintenant, avec ces changements, ma validation de formulaire est devenue plus robuste dans cet exercice. 60 00:04:53,145 --> 00:04:59,534 Maintenant, lorsque le formulaire connaît des changements dans l'un de ses éléments de formulaire, 61 00:04:59,534 --> 00:05:09,530 alors le framework Angular fournit un observable appelé comme ValueChanges observable. 62 00:05:09,530 --> 00:05:16,150 Donc, je vais utiliser les ValueChanges observables sur mon formulaire de rétroaction. 63 00:05:16,550 --> 00:05:19,770 Donc, les ValeurChanges observables. 64 00:05:19,770 --> 00:05:26,640 Ainsi, l'observable ValueChanges peut maintenant être abonné dans cette méthode particulière. 65 00:05:26,640 --> 00:05:28,415 Donc, lorsque nous créons le formulaire lui-même, 66 00:05:28,415 --> 00:05:31,520 , nous nous abonnerons aux Value Changes observables ici. 67 00:05:31,520 --> 00:05:33,470 Maintenant, quand les ValueChanges, 68 00:05:33,470 --> 00:05:38,274 donc en souscrivant à cet observable, 69 00:05:38,274 --> 00:05:44,630 dans l'abonnement, je vais spécifier ce qui doit être fait lorsque les ValueChanges. 70 00:05:44,630 --> 00:05:49,160 Donc, lorsque le valueChanges, j'obtiendrais quelques données ici, 71 00:05:49,160 --> 00:05:52,055 de la ferme pour indiquer 72 00:05:52,055 --> 00:05:59,050 quel élément de formulaire particulier a connu le changement de la valeur. 73 00:05:59,050 --> 00:06:00,665 Ensuite, quand cela se produit, 74 00:06:00,665 --> 00:06:07,865 , je vais déclencher une méthode locale que je vais implémenter appelée onValueChanged, 75 00:06:07,865 --> 00:06:13,165 et ensuite fournir ces données en tant que paramètre à cette méthode. 76 00:06:13,165 --> 00:06:16,455 Maintenant, à l'intérieur de cette méthode onValueChanged, 77 00:06:16,455 --> 00:06:20,445 , je vais lancer la validation du formulaire, 78 00:06:20,445 --> 00:06:27,155 et ensuite définir correctement les messages d'erreur de formulaire en fonction de ce que 79 00:06:27,155 --> 00:06:35,380 cet objet de données que j'obtiens ici me spécifiera. 80 00:06:35,380 --> 00:06:39,125 De plus, quand je crée le formulaire, 81 00:06:39,125 --> 00:06:47,114 Je vais appeler la méthode onValueChanged sans aucun paramètre, 82 00:06:47,114 --> 00:06:50,250 et cela serait utilisé pour 83 00:06:50,250 --> 00:06:58,615 réinitialiser les messages de validation de formulaire. 84 00:06:58,615 --> 00:07:02,195 Maintenant, comment créer les messages de validation de formulaire ? 85 00:07:02,195 --> 00:07:09,230 Pour ce faire, je vais définir mes messages de validation de formulaire complètement dans le code ici. 86 00:07:09,230 --> 00:07:12,620 Ensuite, à travers le code, 87 00:07:12,620 --> 00:07:15,920 , je vais adapter les messages de validation de formulaire, 88 00:07:15,920 --> 00:07:23,785 et qui serait ensuite utilisé pour afficher les messages d'erreur dans mon modèle de formulaire lui-même. 89 00:07:23,785 --> 00:07:33,830 Donc, pour ce faire, ce que je vais faire est d'ajouter quelques objets JavaScript ici. 90 00:07:33,830 --> 00:07:42,485 L'un des objets JavaScript que je vais ajouter est nommé comme erreurs de formulaire. 91 00:07:42,485 --> 00:07:46,790 Donc, c'est un simple objet JavaScript que 92 00:07:46,790 --> 00:07:52,315 contiendra toutes les erreurs pour le formulaire particulier ici. 93 00:07:52,315 --> 00:07:54,799 Donc, dans les erreurs de formulaire, 94 00:07:54,799 --> 00:08:02,609 , j'utiliserai quatre champs différents, 95 00:08:02,609 --> 00:08:11,275 prénom, nom de famille. 96 00:08:11,275 --> 00:08:13,305 Donc, comme vous vous en souvenez, 97 00:08:13,305 --> 00:08:21,889 ceux-ci correspondent aux quatre éléments de formulaire sur lesquels je fais la validation du formulaire, 98 00:08:21,889 --> 00:08:30,470 numéro de téléphone et email. 99 00:08:30,470 --> 00:08:35,020 Maintenant, pourquoi puis-je définir cet objet JavaScript ici ? 100 00:08:35,020 --> 00:08:41,075 Maintenant, cet objet JavaScript comme vous le voyez contient quatre éléments ici. 101 00:08:41,075 --> 00:08:44,270 Maintenant, chaque fois que je fais la validation du formulaire, 102 00:08:44,270 --> 00:08:47,090 rappellent que j'ai déjà spécifié que 103 00:08:47,090 --> 00:08:50,915 je vais créer une nouvelle méthode appelée onValueChange. 104 00:08:50,915 --> 00:08:55,145 Dans le onValueChange, la façon dont le code est écrit est que, 105 00:08:55,145 --> 00:08:58,300 si une erreur est détectée, 106 00:08:58,300 --> 00:09:02,315 une chaîne contenant le message correspondant à 107 00:09:02,315 --> 00:09:08,135 cette erreur sera ajoutée dans cet objet JavaScript. 108 00:09:08,135 --> 00:09:10,535 Donc, de cette façon dans mon code, 109 00:09:10,535 --> 00:09:13,204 Je peux faire la validation du formulaire. 110 00:09:13,204 --> 00:09:15,315 Maintenant, en plus de cela, 111 00:09:15,315 --> 00:09:21,150 Je vais maintenant définir quelques messages de validation. 112 00:09:21,840 --> 00:09:27,100 Maintenant, ce modèle particulier de faire les choses, 113 00:09:27,100 --> 00:09:36,345 J'ai appris en lisant la documentation sur la validation des formulaires dans le site angular.io. 114 00:09:36,345 --> 00:09:43,020 Donc, ils ont toute une documentation sur la façon de faire la validation des formulaires et un lien vers lequel est 115 00:09:43,020 --> 00:09:45,315 disponible dans les ressources supplémentaires de 116 00:09:45,315 --> 00:09:50,510 ce chapitre et aussi les chapitres précédents sur les formes angulaires. 117 00:09:50,510 --> 00:09:55,950 Donc, dans ce document particulier, ils 118 00:09:55,950 --> 00:10:02,655 prescrivent ceci comme un moyen de faire la validation de formulaire et j'ai trouvé cela très intuitif. 119 00:10:02,655 --> 00:10:08,640 Donc, j'ai également adopté le même modèle pour faire la validation de formulaire dans le code. 120 00:10:08,640 --> 00:10:10,500 Donc, avec ici, 121 00:10:10,500 --> 00:10:20,515 Je vais définir les messages de validation pour tous les champs possibles ici. 122 00:10:20,515 --> 00:10:22,475 Donc, pour le champ de prénom, 123 00:10:22,475 --> 00:10:30,050 , je vais définir quelques messages de validation ici, donc je dirais, 124 00:10:30,050 --> 00:10:32,965 « requis » et puis dire, 125 00:10:32,965 --> 00:10:39,940 « le prénom est requis » comme ceci, 126 00:10:39,940 --> 00:10:48,790 Je vais ajouter quelques messages de validation 127 00:10:48,790 --> 00:10:52,030 ici et dire, 128 00:10:52,030 --> 00:10:57,070 « Le prénom doit être 129 00:10:57,070 --> 00:11:05,770 au moins 2 caractères de long » et puis je ajoutera également, 130 00:11:05,770 --> 00:11:15,700 « longueur maximale » et le message correspondant serait, 131 00:11:15,700 --> 00:11:23,630 « Le prénom ne peut pas être plus de 25". 132 00:11:24,780 --> 00:11:29,685 Si vous avez un nom qui court en 25 caractères, 133 00:11:29,685 --> 00:11:35,115 vous devez vraiment maudire vos parents pour cela, croyez-moi, 134 00:11:35,115 --> 00:11:39,670 un de mes prénoms est un long deuxième prénom, 135 00:11:39,670 --> 00:11:46,035 et que je n'utilise pas explicitement dans mes documents. 136 00:11:46,035 --> 00:11:48,870 Mais, je peux comprendre la douleur, 137 00:11:48,870 --> 00:11:55,450 si vous avez un nom long supérieur à 25 caractères. 138 00:11:56,700 --> 00:12:02,900 Les gens de certains états du sud de l'Inde ont de longs noms, 139 00:12:03,690 --> 00:12:06,870 mon état inclus, hey, 140 00:12:06,870 --> 00:12:09,270 amusez-vous pendant que nous y sommes. 141 00:12:09,270 --> 00:12:17,180 Ok, je vais aussi inclure la même chose pour le nom de famille. 142 00:12:17,180 --> 00:12:23,380 Donc, je vais éditer ce 143 00:12:23,380 --> 00:12:33,430 et spécifier la même chose que le nom de famille. 144 00:12:33,430 --> 00:12:39,020 Ainsi, comme vous le voyez dans le code, vous pouvez spécifier un ensemble de messages d'erreur. 145 00:12:39,020 --> 00:12:42,855 Maintenant, si vous ajoutez une nouvelle validation à vos formulaires, 146 00:12:42,855 --> 00:12:44,505 tout ce que vous devez faire est, 147 00:12:44,505 --> 00:12:47,230 venez ici et ajoutez le nouveau message d'erreur dans 148 00:12:47,230 --> 00:12:54,635 cet objet JavaScript ici et votre code fonctionnera très bien, en tant que tel. 149 00:12:54,635 --> 00:13:03,015 Donc, c'est l'avantage d'utiliser ce modèle pour concevoir votre validation dans le code. 150 00:13:03,015 --> 00:13:09,835 Continuant, permettez-moi de définir la validation pour le numéro de téléphone et 151 00:13:09,835 --> 00:13:17,700 les deux validation pour les numéros de téléphone qui se produirait est le « requis ». 152 00:13:17,700 --> 00:13:22,390 Donc, je vais juste copier le « requis » à partir de là, 153 00:13:22,390 --> 00:13:24,170 et le coller ici, 154 00:13:24,170 --> 00:13:27,215 et je dirais, 155 00:13:27,215 --> 00:13:36,910 « Numéro de téléphone est requis », et le prochain message d'erreur serait pour « motif ». 156 00:13:36,910 --> 00:13:42,585 Donc, le message d'erreur dit, 157 00:13:42,585 --> 00:13:50,770 « Le numéro de téléphone ne doit contenir que des numéros. » 158 00:13:50,910 --> 00:13:58,070 Donc, c'est l'autre message, de même pour le courrier électronique. 159 00:13:58,070 --> 00:14:03,109 Donc, comme vous pouvez le voir, les valeurs que j'utilise ici 160 00:14:03,109 --> 00:14:08,430 correspondent aux noms de validateur que j'ai utilisés, 161 00:14:08,430 --> 00:14:12,305 « mid length », « max length », « pattern ». 162 00:14:12,305 --> 00:14:14,280 Donc, de même pour l'email, 163 00:14:14,280 --> 00:14:18,720 vous verrez « requis » et « Email ». 164 00:14:18,720 --> 00:14:28,615 Donc, je vais juste copier le « requis » ici et dire, « Email est requis ». 165 00:14:28,615 --> 00:14:36,020 L'autre modèle que vous vous souvenez est pour l'email et je dirais, 166 00:14:36,020 --> 00:14:40,865 « Email non au format valide ». 167 00:14:40,865 --> 00:14:43,200 Donc, généralement si votre email ne contient pas 168 00:14:43,200 --> 00:14:48,190 un signe @ et des caractères des deux côtés du signe @, 169 00:14:48,190 --> 00:14:50,230 alors ce n'est pas un email valide. 170 00:14:50,230 --> 00:14:58,265 Cet email Validator est déjà intégré dans le module de formulaires réactifs angulaires. 171 00:14:58,265 --> 00:15:02,240 Donc, nous allons utiliser l'email Validator ici. 172 00:15:02,240 --> 00:15:07,450 Donc, ici, nous avons tous les messages de validation définis dans le code. 173 00:15:07,450 --> 00:15:14,340 Donc, cela rend très facile de les étendre pour des champs supplémentaires si vous le souhaitez et aussi 174 00:15:14,340 --> 00:15:17,770 en ajoutant plus de messages de validation pour des validations supplémentaires 175 00:15:17,770 --> 00:15:21,865 que vous pourriez introduire pour chacun de ces champs de formulaire. 176 00:15:21,865 --> 00:15:25,785 Aussi, cette erreur de forme d'objet m'aide à suivre 177 00:15:25,785 --> 00:15:31,415 toutes les erreurs associées à chacun des éléments de mon téléphone. 178 00:15:31,415 --> 00:15:34,390 Donc, actuellement je ne vérifie que ces quatre éléments, 179 00:15:34,390 --> 00:15:37,165 donc c'est pourquoi je n'ai que pour cela. 180 00:15:37,165 --> 00:15:42,365 Correction mineure, la « longueur moyenne » devrait être min, 181 00:15:42,365 --> 00:15:45,910 petit 'l' et longueur max aussi avec un petit 'l', 182 00:15:45,910 --> 00:15:48,140 de même pour le nom de famille aussi. 183 00:15:48,140 --> 00:15:53,750 Maintenant, nous allons écrire le code pour la méthode on values change. 184 00:15:53,750 --> 00:15:55,765 Donc, je vais écrire la méthode 185 00:15:55,765 --> 00:16:02,860 ici, « ValueChanged » et ensuite cette 186 00:16:02,860 --> 00:16:08,275 prendra un paramètre, peut-être. 187 00:16:08,275 --> 00:16:10,900 C'est pourquoi j'ai mis un point d'interrogation de données, 188 00:16:10,900 --> 00:16:16,760 ce qui signifie que le paramètre est facultatif. 189 00:16:17,760 --> 00:16:27,610 Donc, la première chose que je vais vérifier est, « ce formulaire de rétroaction », 190 00:16:27,610 --> 00:16:32,290 ce qui signifie que si le formulaire de rétroaction n'a pas été créé alors, 191 00:16:32,290 --> 00:16:34,960 et si cette méthode est appelée, 192 00:16:34,960 --> 00:16:42,130 alors vous devriez simplement « retourner » sans rien. 193 00:16:42,130 --> 00:16:50,680 Ensuite, je vais définir une constante 194 00:16:50,680 --> 00:16:56,780 appelée « ce feedback 195 00:16:56,780 --> 00:17:03,025 formulaire » est juste pour faciliter la définition du reste du code, 196 00:17:03,025 --> 00:17:05,380 alors je dirais, « pour 197 00:17:06,240 --> 00:17:16,330 champ const dans ce .form erreurs ». 198 00:17:16,330 --> 00:17:21,510 Donc, notez que ce champ prendra this.form errors, 199 00:17:21,510 --> 00:17:24,710 l'objet d'erreurs de formulaire que nous avons défini plus tôt. 200 00:17:24,710 --> 00:17:28,150 Donc, sentir signifie que je vais vérifier tous les quatre. 201 00:17:28,150 --> 00:17:29,890 Donc, chaque fois que je détecte des changements, 202 00:17:29,890 --> 00:17:31,260 le prénom, le nom de famille, 203 00:17:31,260 --> 00:17:32,820 numéro de téléphone et un email. 204 00:17:32,820 --> 00:17:41,080 Donc, c'est pourquoi ces quatre porteront exactement les mêmes noms que nous avons utilisés dans le formulaire ici, 205 00:17:41,080 --> 00:17:50,330 et de sorte que le code écrit ici sera facile à utiliser. 206 00:17:52,770 --> 00:17:56,650 Donc, je vais maintenant vérifier les champs de formulaire. 207 00:17:56,650 --> 00:18:07,090 Ensuite, je voudrais d'abord 208 00:18:07,090 --> 00:18:16,000 m'assurer que dans le cas où j'aurais précédemment attaché des messages à ces champs de formulaire, 209 00:18:16,000 --> 00:18:17,810 les erreurs de formulaire s'y objectent, 210 00:18:17,810 --> 00:18:19,665 alors je vais les effacer tous. 211 00:18:19,665 --> 00:18:23,830 Donc, c'est pourquoi si vous appelez cela sans paramètre, 212 00:18:23,830 --> 00:18:26,600 tous les champs d'erreur de formulaire seront effacés, 213 00:18:26,600 --> 00:18:36,335 et alors je ferais, « control FormGet ». 214 00:18:36,335 --> 00:18:44,330 Donc, notez que j'utilise ce champ lui-même pour faire un FormGet donc, 215 00:18:44,330 --> 00:18:48,530 j'ai accès à ce champ de formulaire particulier. 216 00:18:48,530 --> 00:18:52,090 Donc, notez que plus tôt nous faisions « feedbackform.this.feedbackform.get"firstname ». 217 00:18:58,930 --> 00:19:04,870 et ainsi de suite. Donc, j'ai simplifié quoi dans cette constante particulière que nous 218 00:19:04,870 --> 00:19:13,000 définissons ici et puis je dirai, « Si contrôle ». 219 00:19:13,000 --> 00:19:22,645 Donc, ce qui signifie que si le contrôle n'est pas nul et « control.dirty ». 220 00:19:22,645 --> 00:19:28,150 Donc, si ce champ particulier est déjà sale 221 00:19:28,150 --> 00:19:33,635 et pas « control valid ». 222 00:19:33,635 --> 00:19:36,280 Donc, signifie que pour chacun des champs, 223 00:19:36,280 --> 00:19:39,780 Je vérifie littéralement si c'est valide, 224 00:19:39,780 --> 00:19:40,840 si c'est sale, 225 00:19:40,840 --> 00:19:44,260 et ensuite si le contrôle est déjà là. 226 00:19:44,260 --> 00:19:48,430 Ensuite, je vais vérifier pour voir quel genre d'erreurs ont été ajoutées à 227 00:19:48,430 --> 00:19:53,185 ce contrôle particulier par le formulaire là-bas. 228 00:19:53,185 --> 00:19:55,045 Donc, ici, je dirai, 229 00:19:55,045 --> 00:19:59,500 « messages const égaux 230 00:19:59,500 --> 00:20:06,560 à ce champ .validation messages ». 231 00:20:07,260 --> 00:20:10,635 Remarquez comment je ramasse 232 00:20:10,635 --> 00:20:15,785 tous les messages de validation correspondant à ce champ particulier prénom, 233 00:20:15,785 --> 00:20:19,370 lastname, ou telnum ou email, 234 00:20:19,370 --> 00:20:23,585 et puis je vérifierai et verrai si j'ai besoin d'ajouter ceci dans le champ. 235 00:20:23,585 --> 00:20:25,050 Alors, comment puis-je faire ça ? 236 00:20:25,050 --> 00:20:35,360 Donc, nous faisons pour la clé const dans control.errors. 237 00:20:35,360 --> 00:20:45,510 Donc, notez que ce contrôle est form.get field et .error, 238 00:20:45,510 --> 00:20:48,980 donc je vérifie s'il y a des erreurs là-bas. 239 00:20:48,980 --> 00:20:51,370 Ensuite, dans ce cas, 240 00:20:51,370 --> 00:20:58,485 , j'ajouterai ce champ d'erreurs de formulaire. 241 00:20:58,485 --> 00:21:06,285 Donc, pour cet élément particulier dans l'objet JavaScript que j'ai défini ici, 242 00:21:06,285 --> 00:21:13,180 j'ajouterais la clé des messages 243 00:21:13,180 --> 00:21:21,135 plus et de l'espace ici. 244 00:21:21,135 --> 00:21:24,590 Donc, maintenant quel que soit l'enquête d'erreur de forme 245 00:21:24,590 --> 00:21:27,555 ou le message correspondant sera pris et attaché dans, 246 00:21:27,555 --> 00:21:32,350 et alors mon objet JavaScript erreurs de formulaire contiendra maintenant 247 00:21:32,350 --> 00:21:34,970 tous les messages d'erreur attachés ensemble quand 248 00:21:34,970 --> 00:21:39,780 ce particulier sur les valeurs modifiées rats de méthode. 249 00:21:39,780 --> 00:21:44,430 Maintenant, ce morceau de code particulier que j'ai emprunté à 250 00:21:44,430 --> 00:21:50,560 la documentation de validation du formulaire sur angular.iu. 251 00:21:50,560 --> 00:21:55,240 J'ai trouvé que c'est une façon très intuitive de faire la vérification des erreurs de formulaire. 252 00:21:55,240 --> 00:22:02,195 Alors, j'ai pensé pourquoi ne pas en faire usage dans notre exercice de formes réactives angulaires. 253 00:22:02,195 --> 00:22:05,515 Donc, en ajoutant ce code là-dedans. 254 00:22:05,515 --> 00:22:15,180 Maintenant, ma candidature est prête à faire la validation du formulaire pour mon formulaire réactif. 255 00:22:15,180 --> 00:22:22,500 Donc, maintenant l'étape suivante est d'aller au contact component.html, 256 00:22:22,500 --> 00:22:25,805 le fichier de modèle, puis mettez à jour le fichier de modèle. 257 00:22:25,805 --> 00:22:28,505 Donc, en allant à ce fichier template, 258 00:22:28,505 --> 00:22:31,275 nous allons maintenant passer au formulaire, 259 00:22:31,275 --> 00:22:39,100 et dans ce formulaire maintenant au lieu de faire toutes ces vérifications dans le code, 260 00:22:39,920 --> 00:22:48,165 nous pouvons maintenant simplifier beaucoup du code ici dans le fichier template ici. 261 00:22:48,165 --> 00:22:50,550 Maintenant, au lieu de faire toutes ces vérifications, 262 00:22:50,550 --> 00:22:56,065 ce que nous réalisons est que les erreurs de formulaire objet JavaScript dans 263 00:22:56,065 --> 00:23:00,270 mon fichier dactylographié s'il y a des erreurs puis 264 00:23:00,270 --> 00:23:05,610 l'objet JavaScript erreurs de formulaire pour ce champ particulier, 265 00:23:05,610 --> 00:23:10,125 aura tous les messages d'erreur attachés à lui. 266 00:23:10,125 --> 00:23:11,460 S'il n'y a pas d'erreurs, 267 00:23:11,460 --> 00:23:14,505 alors ces messages d'erreur ne seront pas là. 268 00:23:14,505 --> 00:23:17,860 Donc, c'est ce que je vais utiliser pour vérifier et 269 00:23:17,860 --> 00:23:21,245 voir si je devrais afficher l'erreur de formulaire ou non. 270 00:23:21,245 --> 00:23:24,685 Donc, d'ailleurs, au lieu de vérifier tout cela, 271 00:23:24,685 --> 00:23:34,740 la seule chose que j'ai besoin de vérifier ici est FormErrors prénom, c'est tout. 272 00:23:34,740 --> 00:23:40,450 Donc, très facile de vérifier les erreurs ici. 273 00:23:41,110 --> 00:23:47,095 De même, donc tout ce code est maintenant simplifié ici, 274 00:23:47,095 --> 00:23:52,100 et de même quand vous vérifiez le message ici, 275 00:23:52,100 --> 00:23:56,615 ce que nous allons faire, je vais changer tout cela de 276 00:23:56,615 --> 00:24:05,165 requis touché à FormErrors.FirstName. 277 00:24:05,165 --> 00:24:08,955 C'est ça. Si cela existe, 278 00:24:08,955 --> 00:24:14,760 alors tous les messages d'erreur correspondant à cela seront déjà là, 279 00:24:14,760 --> 00:24:19,620 donc j'ai juste besoin de faire l'interpolation et 280 00:24:19,620 --> 00:24:26,555 puis afficher FormErrors.FirstName ici, 281 00:24:26,555 --> 00:24:28,385 aussi simple que cela. 282 00:24:28,385 --> 00:24:30,240 Maintenant, vous voyez en faisant 283 00:24:30,240 --> 00:24:36,355 toute la validation d'erreur de formulaire et le code et en faisant toutes les vérifications et ainsi de suite dans le code, 284 00:24:36,355 --> 00:24:40,200 vous avez déjà construit les messages d'erreur que nous devons afficher. 285 00:24:40,200 --> 00:24:42,740 Tout ce que nous faisons est de prendre ce message d'erreur et ensuite de mettre 286 00:24:42,740 --> 00:24:45,745 ceci dans le modèle ici, c'est tout. 287 00:24:45,745 --> 00:24:50,105 Le code de modèle devient plus simplifié dans ce cas particulier, 288 00:24:50,105 --> 00:24:57,225 et aussi en faisant la validation du formulaire en utilisant le code dactylographié, 289 00:24:57,225 --> 00:25:02,045 nous avons simplifié le modèle ici en même temps nous pouvons faire 290 00:25:02,045 --> 00:25:09,165 validation de formulaire plus compliquée dans notre code dactylographié. 291 00:25:09,165 --> 00:25:16,500 Je vais aller de l'avant et faire le même genre de changements aux champs restants ici, 292 00:25:16,500 --> 00:25:20,460 donc pour le champ de nom de famille, 293 00:25:20,460 --> 00:25:30,850 je vais à nouveau remplacer tout cela par FormErrors.LastName. 294 00:25:34,100 --> 00:25:41,050 Maintenant, faites encore la même chose pour le numéro de téléphone. 295 00:25:41,330 --> 00:25:46,910 Maintenant, encore une fois que vous voyez la structure du modèle devient très, 296 00:25:46,910 --> 00:25:50,230 très uniforme dans ce cas. 297 00:25:50,230 --> 00:25:55,020 Donc, c'est aussi une autre façon de simplifier 298 00:25:55,020 --> 00:26:01,660 la structure de votre modèle en continuant au champ email ici. 299 00:26:01,660 --> 00:26:06,640 Je vais faire le même changement dans le champ email aussi. 300 00:26:06,640 --> 00:26:10,430 Donc, je dirais FormErrors.email 301 00:26:12,470 --> 00:26:19,140 et remplacer ceci par formatters.email. 302 00:26:19,140 --> 00:26:20,995 Donc, comme vous pouvez le voir, 303 00:26:20,995 --> 00:26:28,455 votre code de modèle a considérablement simplifié par rapport à auparavant. 304 00:26:28,455 --> 00:26:32,545 Avec cela, toute la validation d'erreur que j'ai besoin 305 00:26:32,545 --> 00:26:36,600 a été ajoutée dans mon modèle et mon modèle est maintenant mis à jour, 306 00:26:36,600 --> 00:26:38,900 alors sauvegardons les modifications. 307 00:26:39,560 --> 00:26:46,800 Deux autres choses que j'ai besoin d'ajouter est l'attribut 308 00:26:46,800 --> 00:26:53,255 appelé email à ce champ particulier appelé email. 309 00:26:53,255 --> 00:26:56,625 Alors, rappelez-vous que nous avons ajouté l'email Validator ici. 310 00:26:56,625 --> 00:26:58,300 Donc, avec le requis, 311 00:26:58,300 --> 00:27:03,655 Je vais ajouter aussi de l'email au champ de saisie ici. 312 00:27:03,655 --> 00:27:05,655 De même, pour le telnum, 313 00:27:05,655 --> 00:27:08,115 nous utilisons le modèle là. 314 00:27:08,115 --> 00:27:14,670 Donc, je vais ajouter dans le modèle donc c'est le champ de saisie pour le telnum. 315 00:27:14,670 --> 00:27:24,485 Donc, dans le champ de saisie, je vais ajouter le motif est égal à et 316 00:27:24,485 --> 00:27:29,250 le motif que je vais ajouter est 317 00:27:29,250 --> 00:27:35,350 entre crochets zéro à neuf, 318 00:27:35,350 --> 00:27:37,875 et ensuite mettre une étoile là. 319 00:27:37,875 --> 00:27:45,430 Donc, ce qui signifie que c'est quelque chose de zéro à neuf répété plusieurs fois. 320 00:27:45,430 --> 00:27:51,045 Ainsi, le numéro de téléphone peut contenir des nombres compris entre zéro et neuf. 321 00:27:51,045 --> 00:27:53,370 N'importe quel nombre de ces chiffres. 322 00:27:53,370 --> 00:27:57,085 Vous pouvez également mettre une minlength et maxlength sur le champ telnum 323 00:27:57,085 --> 00:28:01,100 si pour votre pays particulier le numéro de téléphone a un format fixe, 324 00:28:01,100 --> 00:28:02,440 vous pouvez le faire aussi. 325 00:28:02,440 --> 00:28:05,410 Donc, cela peut facilement être fait. 326 00:28:05,410 --> 00:28:08,130 Mais, dans cet exercice, 327 00:28:08,130 --> 00:28:13,470 je n'ai pas ajouté la restriction minlength et maxlength pour le telnum ici. 328 00:28:13,470 --> 00:28:15,720 Maintenant, que nous avons fait toutes les mises à jour, 329 00:28:15,720 --> 00:28:23,150 nous allons enregistrer les modifications et ensuite aller jeter un oeil au formulaire dans le navigateur. 330 00:28:23,150 --> 00:28:25,640 En allant dans le navigateur maintenant, 331 00:28:25,640 --> 00:28:28,920 faisons défiler jusqu'au formulaire ici. 332 00:28:28,920 --> 00:28:34,775 Tapons le prénom et comme vous le voyez lorsque vous tapez un seul caractère, 333 00:28:34,775 --> 00:28:38,290 alors le message d'erreur est immédiatement affiché, 334 00:28:38,290 --> 00:28:42,490 mais au moment où vous tapez des caractères supplémentaires ce message d'erreur disparaîtra. 335 00:28:42,490 --> 00:28:44,980 De même, pour le nom de famille. 336 00:28:44,980 --> 00:28:50,794 Pour le numéro de téléphone, si vous essayez de taper autre chose que des nombres, 337 00:28:50,794 --> 00:28:53,830 alors les messages d'erreur s'affichent. 338 00:28:54,240 --> 00:28:56,575 Donc, vous pouvez taper, 339 00:28:56,575 --> 00:29:04,790 de la même manière pour l'e-mail, de sorte que vous voyez que le format de l'e-mail non valide sera affiché. 340 00:29:04,790 --> 00:29:10,380 Si vous n'avez pas l'e-mail, il affiche également le message d'erreur. 341 00:29:10,380 --> 00:29:14,415 Mais, dès que vous tapez quelque chose comme ça, 342 00:29:14,415 --> 00:29:18,745 alors ceci est considéré comme un format d'email valide donc il sera accepté. 343 00:29:18,745 --> 00:29:23,895 Donc, c'est l'ensemble des messages d'erreur et la validation de formulaire 344 00:29:23,895 --> 00:29:30,080 fait complètement dans le code comme fait dans cet exercice particulier. 345 00:29:30,080 --> 00:29:33,625 Donc, avec cela, nous terminons cet exercice. 346 00:29:33,625 --> 00:29:40,200 Dans cet exercice, nous avons vu l'utilisation du changement de valeur est observable, 347 00:29:40,200 --> 00:29:46,915 et nous avons également vu comment nous pouvons faire la validation de formulaire dans notre code dactylographié. 348 00:29:46,915 --> 00:29:49,040 Ceci termine cet exercice. 349 00:29:49,040 --> 00:29:52,030 C'est le bon moment pour vous de faire un commit git avec 350 00:29:52,030 --> 00:29:56,310 le message réactif forme la troisième partie.