1 00:00:00,000 --> 00:00:04,438 [MUSIC] 2 00:00:04,438 --> 00:00:08,934 Nous venons de terminer l'apprentissage sur les formulaires pilotés par modèle dans 3 00:00:08,934 --> 00:00:12,310 angulaire dans la leçon précédente. 4 00:00:12,310 --> 00:00:18,336 Angular prend également en charge une autre façon de concevoir des formes appelées formes réactives, 5 00:00:18,336 --> 00:00:25,390 les formes réactives utilisent le style réactif de programmation pour soutenir les formes. 6 00:00:25,390 --> 00:00:28,050 Nous parlerons brièvement de la programmation réactive dans 7 00:00:28,050 --> 00:00:31,110 une des leçons ultérieures de ce module. 8 00:00:31,110 --> 00:00:34,180 Mais maintenant, nous allons traiter des formes réactives et 9 00:00:34,180 --> 00:00:38,410 voir comment nous pouvons concevoir des formes réactives dans angulaire et 10 00:00:38,410 --> 00:00:44,430 quelles sont les caractéristiques uniques de faire des formes réactives dans angulaire suivante. 11 00:00:46,150 --> 00:00:52,310 Le style réactif de programmation préconise la gestion explicite des données 12 00:00:52,310 --> 00:00:58,500 circulant entre le modèle de données non-UI et le modèle de formulaire 13 00:00:58,500 --> 00:01:04,280 orienté UII et c'est l'approche que les formes réactives prennent dans Angular. 14 00:01:04,280 --> 00:01:09,240 Maintenant, cela n'a peut-être pas beaucoup de sens pour vous en ce moment, mais au fur et à mesure que nous terminons cet exercice 15 00:01:09,240 --> 00:01:14,860 et la conférence, il vous sera encore plus clair 16 00:01:14,860 --> 00:01:21,530 pourquoi l'approche réactive convient à cette conception de forme dans certains contextes. 17 00:01:21,530 --> 00:01:26,630 Maintenant, dans l'approche réactive, nous créons un arbre d'objets de contrôle de formulaire 18 00:01:26,630 --> 00:01:30,810 angulaires, dans la classe de composant. 19 00:01:30,810 --> 00:01:33,300 Maintenant, dans les formulaires pilotés par modèle que vous avez vus plus tôt, 20 00:01:34,450 --> 00:01:38,870 nous concevons les formulaires en utilisant l'approche de modèle HTML, donc 21 00:01:38,870 --> 00:01:44,075 tous les contrôles de formulaire que nous mettons dans ce formulaire dans le modèle HTML et 22 00:01:44,075 --> 00:01:49,667 nous gérons principalement les données et ils nous sont liés à leur objet de composant 23 00:01:49,667 --> 00:01:55,770 via le NG modèle directement. 24 00:01:55,770 --> 00:02:01,280 Dans cette approche, nous allons créer cette structure de formulaire dans notre composant et 25 00:02:01,280 --> 00:02:06,220 puis lier la structure de formulaire dans des contrôles fermes dans notre modèle, donc 26 00:02:06,220 --> 00:02:10,860 nous allons lier l'arbre de formulaire que nous avons 27 00:02:10,860 --> 00:02:15,920 créé dans notre classe de composant aux éléments de forme native 28 00:02:15,920 --> 00:02:20,910 dans notre fichier de modèle là-bas. 29 00:02:20,910 --> 00:02:25,530 Donc, dans cette approche, la classe de composant a un accès 30 00:02:25,530 --> 00:02:30,390 immédiat au modèle de données ainsi qu'à la structure de contrôle de formulaire et donc 31 00:02:30,390 --> 00:02:36,575 nous pouvons ensuite prendre le modèle de données et le pousser dans la structure de contrôle de formulaire et 32 00:02:36,575 --> 00:02:40,985 en conséquence retirer les informations de la structure de contrôle de formulaire et 33 00:02:40,985 --> 00:02:43,355 puis le mapper au modèle de données. 34 00:02:43,355 --> 00:02:48,355 Ainsi, le modèle de données entrant depuis le backend peut être mappé pour former une structure de contrôle 35 00:02:48,355 --> 00:02:53,410 qui se reflète dans la vue à travers ce modèle 36 00:02:54,550 --> 00:02:58,280 et le pont entre eux est fait dans la classe de composant 37 00:02:58,280 --> 00:03:02,660 en créant la structure de formulaire à l'intérieur de la classe de composant. 38 00:03:02,660 --> 00:03:07,330 Maintenant, cela n'a pas beaucoup de sens pour vous en ce moment, mais 39 00:03:07,330 --> 00:03:12,230 quand nous faisons l'exercice, il deviendra encore plus clair pour vous comment cette liaison 40 00:03:12,230 --> 00:03:17,080 entre le modèle de données et la structure de contrôle ferme peut être accomplie 41 00:03:17,080 --> 00:03:22,185 à l'intérieur de la classe de composant dans le code de script de type du classe de composants. 42 00:03:22,185 --> 00:03:26,700 C'est donc là que nous allons tirer parti des modèles réactifs, des tests et de la validation 43 00:03:26,700 --> 00:03:31,160 à un grand avantage, donc cette approche réactive de forme 44 00:03:31,160 --> 00:03:35,170 prend en charge les modèles réactifs de programmation, comme je l'ai dit, nous parlerons 45 00:03:35,170 --> 00:03:39,880 plus de programmation réactive un peu plus tard dans ce module. 46 00:03:40,900 --> 00:03:45,470 De plus, le fait que nous créons les formulaires dans le code 47 00:03:45,470 --> 00:03:50,840 signifie que le test et l'évaluation des formulaires deviennent beaucoup plus faciles. 48 00:03:50,840 --> 00:03:54,040 Les formulaires pilotés par modèle sont très difficiles à tester 49 00:03:54,040 --> 00:03:58,770 car une grande partie de la structure est dans le code du modèle, donc 50 00:03:58,770 --> 00:04:03,800 l'approche réactive se prête beaucoup mieux pour les tests unitaires et 51 00:04:03,800 --> 00:04:10,150 aussi pour la validation des formulaires comme nous le verrons un peu plus tard dans l'exercice. 52 00:04:10,150 --> 00:04:15,650 Réfléchissons brièvement sur certains des avantages de l'utilisation de formes réactives. 53 00:04:15,650 --> 00:04:20,820 Un des avantages est que les valeurs sous la forme que les éléments 54 00:04:20,820 --> 00:04:25,986 sont immédiatement disponibles et synchrones avec le code abstrait. 55 00:04:25,986 --> 00:04:29,990 Dans la forme pilotée par modèle, il prend en cycle pour 56 00:04:29,990 --> 00:04:35,510 toutes les modifications écrites le modèle à refléter dans votre code là, 57 00:04:35,510 --> 00:04:40,990 mais dans l'approche réactive, le bit de synchronisation, les données et 58 00:04:40,990 --> 00:04:46,491 la vue est étroitement maintenu. 59 00:04:46,491 --> 00:04:50,680 Deuxièmement, les formes réactives, comme je l'ai déjà mentionné, 60 00:04:50,680 --> 00:04:55,560 sont plus faciles à faire des tests unitaires et cela devient très crucial 61 00:04:55,560 --> 00:05:01,240 lorsque vous concevez une réplication d'angle très complexe. 62 00:05:01,240 --> 00:05:04,320 Les formulaires réactifs sont pris en charge pour certaines classes 63 00:05:04,320 --> 00:05:08,240 qui sont disponibles pour la bibliothèque de formulaires angulaires. 64 00:05:08,240 --> 00:05:13,390 L'un d'eux est la classe FormControl qui alimente le contrôle de formulaire individuel est 65 00:05:13,390 --> 00:05:19,350 que nous incluons dans notre formulaire les éléments individuels et nous permet également de 66 00:05:19,350 --> 00:05:24,360 suivre la valeur de ces limites et de faire la validation de ces éléments. 67 00:05:25,500 --> 00:05:29,110 Le FormGroup est un groupe de FormControl, donc 68 00:05:29,110 --> 00:05:32,420 lorsque vous voulez organiser FormControls ensemble en tant que groupe et 69 00:05:32,420 --> 00:05:37,700 puis suivre les informations sur ces groupes dans leur ensemble, alors FormGroup 70 00:05:37,700 --> 00:05:43,240 vous permet d'agglomérer un groupe de FormControls ensemble. 71 00:05:44,780 --> 00:05:48,850 En outre, nous avons aussi une classe AbstractControl qui est une classe abstraiteclasse basée sur 72 00:05:48,850 --> 00:05:53,930 pour les classes FormControl, qui peut également être utilisée à notre avantage 73 00:05:53,930 --> 00:05:58,500 bien que nous voulions les voir spécifiquement dans l'exercice plus tard, 74 00:05:58,500 --> 00:06:02,630 mais nous reviendrons les utiliser plus tard. 75 00:06:05,600 --> 00:06:10,430 Et aussi nous avons une classe FormArray qui vous permet de définir 76 00:06:10,430 --> 00:06:15,410 un tableau indexé numériquement d'instances AbstractControl, 77 00:06:15,410 --> 00:06:19,460 à nouveau, à la fois AbstractControl et FormArray, nous n'examinerons pas explicitement 78 00:06:19,460 --> 00:06:24,950 dans cette leçon particulière, mais nous les verrons plus tard dans le cours. 79 00:06:24,950 --> 00:06:28,070 Un autre aspect intéressant des formes réactives 80 00:06:28,070 --> 00:06:29,950 est la disponibilité du FormBuilder. 81 00:06:29,950 --> 00:06:36,925 La classe FormBuilder permet de créer les formulaires dans notre code TypeScript et 82 00:06:36,925 --> 00:06:42,115 puis de les lier avec les contrôles de modèle là-bas. 83 00:06:42,115 --> 00:06:47,218 Donc, pour utiliser la classe Form Builder, vous importez le Form Builder à partir des formulaires 84 00:06:47,218 --> 00:06:52,483 angulaires, puis là après vous pouvez utiliser le Form Builder pour construire le formulaire, 85 00:06:52,483 --> 00:06:57,424 comme si vous utilisez et faites ce que vos classes de convertisseur de formulaire et les classes Form group 86 00:06:57,424 --> 00:07:03,040 comme nous l'avons vu dans la diapositive précédente ce code est un peu plus élaboré. 87 00:07:03,040 --> 00:07:08,180 Mais en utilisant la classe FormBuilder, il réduit l'inclitique de répétition de dans votre code 88 00:07:08,180 --> 00:07:13,610 et le rend beaucoup plus compact pour définir les polices. 89 00:07:13,610 --> 00:07:16,440 Nous allons utiliser la classe FormBuilder comme approche pour les formulaires de construction 90 00:07:16,440 --> 00:07:19,760 dans l'exercice qui suit et 91 00:07:19,760 --> 00:07:26,170 cet exemple est dérivé de l'exercice que vous ferez juste après cette conférence. 92 00:07:26,170 --> 00:07:31,320 Donc, vous pouvez voir ici que nous avons construit un formulaire, comme un groupe de ces éléments de contrôle de formulaire 93 00:07:31,320 --> 00:07:39,100 et chacun d'eux ayant un nom spécifique et aussi la valeur qui leur est donnée. 94 00:07:39,100 --> 00:07:43,540 En créant le modèle de formulaire dans notre code dactylographié, 95 00:07:43,540 --> 00:07:48,030 vous ne remplissez pas automatiquement le modèle de formulaire, vous devez remplir exclusivement 96 00:07:48,030 --> 00:07:51,190 le modèle de formulaire surtout si vous obtenez les données dans un modèle de données, 97 00:07:51,190 --> 00:07:55,280 alors le modèle de données doit être mappé dans votre modèle de formulaire pour remplir les valeurs, 98 00:07:55,280 --> 00:08:00,580 de sorte que la et le modèle de données sont séparés dans des formes réactives. 99 00:08:00,580 --> 00:08:05,340 Dans les formulaires pilotés par le modèle, vous avez vu que nous essayons directement dans les objets data 100 00:08:05,340 --> 00:08:09,990 du fichier template à notre code abstrait. 101 00:08:09,990 --> 00:08:12,710 Donc, dans ce cas, le formulaire et le modèle de données sont gardés séparés, donc 102 00:08:12,710 --> 00:08:17,610 toutes les modifications que vous apportez aux éléments DOM 103 00:08:17,610 --> 00:08:22,660 de votre formulaire couleront dans le modèle de formulaire et 104 00:08:22,660 --> 00:08:28,030 vous devez refléter explicitement les données de formulaire à 105 00:08:28,030 --> 00:08:33,670 ce modèle de données, même par le biais d'un service ou tout autre moyen que vous choisirez, 106 00:08:33,670 --> 00:08:39,240 donc cette séparation nous aide à concevoir notre code beaucoup mieux, comme nous le verrons plus tard. 107 00:08:40,520 --> 00:08:45,490 Deux méthodes sont disponibles pour remplir un modèle de formulaire à partir d'un modèle de données. 108 00:08:45,490 --> 00:08:50,280 Nous avons la méthode setValue (), qui nous permet d'attribuer chaque contrôle de formulaire 109 00:08:50,280 --> 00:08:54,710 à une valeur particulière du modèle de données ou nous avons un PatchValue (), 110 00:08:54,710 --> 00:08:59,360 qui vous permet de mettre à jour seulement certains contrôles dans votre modèle de formulaire. 111 00:08:59,360 --> 00:09:02,970 Donc, une fois que vous obtenez le modèle de données depuis le backend, à partir du modèle de données, 112 00:09:02,970 --> 00:09:08,030 , vous pouvez corriger les valeurs dans votre modèle de formulaire ou mapper les valeurs de 113 00:09:08,030 --> 00:09:13,130 votre modèle de données dans votre modèle de formulaire, très souvent, nous créerons le modèle de données, 114 00:09:13,130 --> 00:09:18,740 qui reflète raisonnablement la structure du formulaire. 115 00:09:18,740 --> 00:09:22,060 Dans l'exercice qui suit, vous verrez que j'ai un modèle de données 116 00:09:22,060 --> 00:09:24,210 qui est basé sur une classe, 117 00:09:24,210 --> 00:09:30,030 qui reflète très étroitement le modèle de formulaire que nous utilisons dans notre exemple là-bas. 118 00:09:31,740 --> 00:09:38,263 Avec cette compréhension rapide des formes réactives, passons maintenant à l'exercice 119 00:09:38,263 --> 00:09:43,880 où nous allons doubler une forme réactive dans notre application angulaire et 120 00:09:43,880 --> 00:09:47,958 en cours de route consolider une partie de la terminologie et 121 00:09:47,958 --> 00:09:52,866 aussi certaines des idées que nous venons d'explorer dans cette leçon. 122 00:09:52,866 --> 00:09:59,009 [MUSIQUE]