[MUSIC]
Nous venons de terminer l'apprentissage sur les formulaires pilotés par modèle dans
angulaire dans la leçon précédente.
Angular prend également en charge une autre façon de concevoir des formes appelées formes réactives,
les formes réactives utilisent le style réactif de programmation pour soutenir les formes.
Nous parlerons brièvement de la programmation réactive dans
une des leçons ultérieures de ce module.
Mais maintenant, nous allons traiter des formes réactives et
voir comment nous pouvons concevoir des formes réactives dans angulaire et
quelles sont les caractéristiques uniques de faire des formes réactives dans angulaire suivante.
Le style réactif de programmation préconise la gestion explicite des données
circulant entre le modèle de données non-UI et le modèle de formulaire
orienté UII et c'est l'approche que les formes réactives prennent dans Angular.
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
et la conférence, il vous sera encore plus clair
pourquoi l'approche réactive convient à cette conception de forme dans certains contextes.
Maintenant, dans l'approche réactive, nous créons un arbre d'objets de contrôle de formulaire
angulaires, dans la classe de composant.
Maintenant, dans les formulaires pilotés par modèle que vous avez vus plus tôt,
nous concevons les formulaires en utilisant l'approche de modèle HTML, donc
tous les contrôles de formulaire que nous mettons dans ce formulaire dans le modèle HTML et
nous gérons principalement les données et ils nous sont liés à leur objet de composant
via le NG modèle directement.
Dans cette approche, nous allons créer cette structure de formulaire dans notre composant et
puis lier la structure de formulaire dans des contrôles fermes dans notre modèle, donc
nous allons lier l'arbre de formulaire que nous avons
créé dans notre classe de composant aux éléments de forme native
dans notre fichier de modèle là-bas.
Donc, dans cette approche, la classe de composant a un accès
immédiat au modèle de données ainsi qu'à la structure de contrôle de formulaire et donc
nous pouvons ensuite prendre le modèle de données et le pousser dans la structure de contrôle de formulaire et
en conséquence retirer les informations de la structure de contrôle de formulaire et
puis le mapper au modèle de données.
Ainsi, le modèle de données entrant depuis le backend peut être mappé pour former une structure de contrôle
qui se reflète dans la vue à travers ce modèle
et le pont entre eux est fait dans la classe de composant
en créant la structure de formulaire à l'intérieur de la classe de composant.
Maintenant, cela n'a pas beaucoup de sens pour vous en ce moment, mais
quand nous faisons l'exercice, il deviendra encore plus clair pour vous comment cette liaison
entre le modèle de données et la structure de contrôle ferme peut être accomplie
à l'intérieur de la classe de composant dans le code de script de type du classe de composants.
C'est donc là que nous allons tirer parti des modèles réactifs, des tests et de la validation
à un grand avantage, donc cette approche réactive de forme
prend en charge les modèles réactifs de programmation, comme je l'ai dit, nous parlerons
plus de programmation réactive un peu plus tard dans ce module.
De plus, le fait que nous créons les formulaires dans le code
signifie que le test et l'évaluation des formulaires deviennent beaucoup plus faciles.
Les formulaires pilotés par modèle sont très difficiles à tester
car une grande partie de la structure est dans le code du modèle, donc
l'approche réactive se prête beaucoup mieux pour les tests unitaires et
aussi pour la validation des formulaires comme nous le verrons un peu plus tard dans l'exercice.
Réfléchissons brièvement sur certains des avantages de l'utilisation de formes réactives.
Un des avantages est que les valeurs sous la forme que les éléments
sont immédiatement disponibles et synchrones avec le code abstrait.
Dans la forme pilotée par modèle, il prend en cycle pour
toutes les modifications écrites le modèle à refléter dans votre code là,
mais dans l'approche réactive, le bit de synchronisation, les données et
la vue est étroitement maintenu.
Deuxièmement, les formes réactives, comme je l'ai déjà mentionné,
sont plus faciles à faire des tests unitaires et cela devient très crucial
lorsque vous concevez une réplication d'angle très complexe.
Les formulaires réactifs sont pris en charge pour certaines classes
qui sont disponibles pour la bibliothèque de formulaires angulaires.
L'un d'eux est la classe FormControl qui alimente le contrôle de formulaire individuel est
que nous incluons dans notre formulaire les éléments individuels et nous permet également de
suivre la valeur de ces limites et de faire la validation de ces éléments.
Le FormGroup est un groupe de FormControl, donc
lorsque vous voulez organiser FormControls ensemble en tant que groupe et
puis suivre les informations sur ces groupes dans leur ensemble, alors FormGroup
vous permet d'agglomérer un groupe de FormControls ensemble.
En outre, nous avons aussi une classe AbstractControl qui est une classe abstraiteclasse basée sur
pour les classes FormControl, qui peut également être utilisée à notre avantage
bien que nous voulions les voir spécifiquement dans l'exercice plus tard,
mais nous reviendrons les utiliser plus tard.
Et aussi nous avons une classe FormArray qui vous permet de définir
un tableau indexé numériquement d'instances AbstractControl,
à nouveau, à la fois AbstractControl et FormArray, nous n'examinerons pas explicitement
dans cette leçon particulière, mais nous les verrons plus tard dans le cours.
Un autre aspect intéressant des formes réactives
est la disponibilité du FormBuilder.
La classe FormBuilder permet de créer les formulaires dans notre code TypeScript et
puis de les lier avec les contrôles de modèle là-bas.
Donc, pour utiliser la classe Form Builder, vous importez le Form Builder à partir des formulaires
angulaires, puis là après vous pouvez utiliser le Form Builder pour construire le formulaire,
comme si vous utilisez et faites ce que vos classes de convertisseur de formulaire et les classes Form group
comme nous l'avons vu dans la diapositive précédente ce code est un peu plus élaboré.
Mais en utilisant la classe FormBuilder, il réduit l'inclitique de répétition de dans votre code
et le rend beaucoup plus compact pour définir les polices.
Nous allons utiliser la classe FormBuilder comme approche pour les formulaires de construction
dans l'exercice qui suit et
cet exemple est dérivé de l'exercice que vous ferez juste après cette conférence.
Donc, vous pouvez voir ici que nous avons construit un formulaire, comme un groupe de ces éléments de contrôle de formulaire
et chacun d'eux ayant un nom spécifique et aussi la valeur qui leur est donnée.
En créant le modèle de formulaire dans notre code dactylographié,
vous ne remplissez pas automatiquement le modèle de formulaire, vous devez remplir exclusivement
le modèle de formulaire surtout si vous obtenez les données dans un modèle de données,
alors le modèle de données doit être mappé dans votre modèle de formulaire pour remplir les valeurs,
de sorte que la et le modèle de données sont séparés dans des formes réactives.
Dans les formulaires pilotés par le modèle, vous avez vu que nous essayons directement dans les objets data
du fichier template à notre code abstrait.
Donc, dans ce cas, le formulaire et le modèle de données sont gardés séparés, donc
toutes les modifications que vous apportez aux éléments DOM
de votre formulaire couleront dans le modèle de formulaire et
vous devez refléter explicitement les données de formulaire à
ce modèle de données, même par le biais d'un service ou tout autre moyen que vous choisirez,
donc cette séparation nous aide à concevoir notre code beaucoup mieux, comme nous le verrons plus tard.
Deux méthodes sont disponibles pour remplir un modèle de formulaire à partir d'un modèle de données.
Nous avons la méthode setValue (), qui nous permet d'attribuer chaque contrôle de formulaire
à une valeur particulière du modèle de données ou nous avons un PatchValue (),
qui vous permet de mettre à jour seulement certains contrôles dans votre modèle de formulaire.
Donc, une fois que vous obtenez le modèle de données depuis le backend, à partir du modèle de données,
, vous pouvez corriger les valeurs dans votre modèle de formulaire ou mapper les valeurs de
votre modèle de données dans votre modèle de formulaire, très souvent, nous créerons le modèle de données,
qui reflète raisonnablement la structure du formulaire.
Dans l'exercice qui suit, vous verrez que j'ai un modèle de données
qui est basé sur une classe,
qui reflète très étroitement le modèle de formulaire que nous utilisons dans notre exemple là-bas.
Avec cette compréhension rapide des formes réactives, passons maintenant à l'exercice
où nous allons doubler une forme réactive dans notre application angulaire et
en cours de route consolider une partie de la terminologie et
aussi certaines des idées que nous venons d'explorer dans cette leçon.
[MUSIQUE]