Avec une brève compréhension des formes réactives angulaires,
passons à l'exercice suivant.
Dans cet exercice, nous allons construire
une forme réactive angulaire dans l'application angulaire sur laquelle nous avons travaillé jusqu'à présent.
En chemin, nous consoliderons notre compréhension des formes angulaires réactives.
Pour commencer l'exercice,
la toute première étape que nous devons faire est d'importer
le module Angular Reactive Forms dans notre module d'application.
Alors, passons au module app,
et nous voyons que nous avions déjà importé le module forms plus tôt.
Nous allons également importer le module Angular Reactive Forms.
Donc, je vais copier ça, coller ça ici,
et ensuite le changer dans le module Angular Reactive Forms.
Après cela, nous devons aussi l'inclure dans notre décorateur.
Donc, en allant au décorateur ici,
Je vais importer le module Reactive forms dans le décorateur.
Deux autres modules que nous devons importer pour
notre formulaire est le MatSelectModule et le MatSlideToggeModule.
Le module select nous permet d'utiliser l'élément select,
et le slideToggle nous permet d'utiliser le toggle à glissière dans notre formulaire.
Donc, pour ce faire, nous allons taper
import MatSelectModule à partir de angulaire/material/select,
et importer MatSlideTogleModule à partir de angulaire/material/slide-toggle,
et ensuite nous devons les ajouter à notre décorateur ngModel dans les importations.
Donc, en descendant là-bas,
laissez-moi importer le MatSelectModule et MatSlideToggeModule là-dedans.
Donc, avec ces changements,
notre module app est maintenant prêt à nous permettre de
utiliser le module Reactive forms dans notre application.
Dans l'étape suivante,
ce que je vais faire est de créer une classe ici appelée Feedback.
Donc, je vais le créer dans le dossier partagé dans le nom de fichier feedback.ts.
Maintenant, c'est la structure de la classe qui représente
le modèle de données correspondant au modèle de formulaire que nous allons utiliser
dans notre application Angular.
Donc, je crée la classe nommée feedback.
Dans la classe Feedback,
Je vais inclure quelques propriétés ;
prénom, nom,
puis numéro de téléphone, Telnum, email,
alors je suis d'accord qui est une variable booléenne,
propriété booléenne, contacttype qui est de la chaîne de type.
Il deviendra plus clair pour vous pourquoi j'inclut tous ces
quand nous regardons la conception du formulaire lui-même.
Cette classe de commentaires correspond aux commentaires que
un utilisateur peut soumettre sur notre restaurant dans notre application Angular.
Donc, c'est la raison pour laquelle je crée cette classe Feedback.
Nous allons mapper cela dans le modèle de formulaire dans
l'un des composants là-bas et aussi avec cela,
je vais exporter une constante qui est un tableau de chaînes appelé
contacttype qui, comme je l'ai mentionné, est un tableau de chaînes contenant trois chaînes ici,
none, Tel et email.
Donc, maintenant notre structure de modèle de données est prête.
Donc, plus tard, lorsque nous développerons notre côté serveur,
, nous serons en mesure de mapper cela dans une donnée que nous stockons sur le côté serveur.
Donc, dans notre application Angular,
cela forme le modèle de données que nous allons utiliser pour notre application tout comme le plat,
le leader, et la promotion que nous avons développée c'est une autre classe qui
nous permet de regrouper un ensemble de propriétés dans une classe ici.
Donc, une fois que nous avons terminé cela,
continuons à créer le formulaire réactif.
Nous allons créer le formulaire réactif dans notre composant contact.
Alors, allons au fichier de contact component.ts,
et nous allons également inclure
le formulaire correspondant dans le fichier de modèle de composants de contact.
Donc, dans le fichier de script de type des composants de contact,
donc c'est là que nous allons préparer notre formulaire
car nous avons vu que le formulaire réactif est construit principalement
dans le code et ensuite mappé dans les éléments de formulaire dans le fichier de modèle.
Donc, ici je vais importer quelques classes.
Je vais importer le FormBuilder,
puis FormBuilder, et les validateurs.
Validators seraient utilisés pour la validation du formulaire qui sera dans le prochain exercice,
mais je vais les importer pour le moment déjà.
Ces fichiers sont importés à partir de la bibliothèque de formulaires angulaires.
Donc, une fois que nous importons ceci,
, nous importerons la classe Feedback et la constante de type de contact
à partir du fichier partagé/feedback
que nous venons de créer à l'étape précédente.
Nous en avons besoin dans notre application.
Maintenant, à l'intérieur de ma classe ici,
, je vais déclarer quelques variables appelées feedbackForm qui est du type FormGroup.
C'est le modèle de formulaire qui va héberger
le formulaire réactif ici et puis je vais aussi déclarer un feedback variable du type Feedback,
donc ce serait le modèle de données correspondant.
Plus tard, cette valeur Feedback peut être récupérée à partir d'un serveur dans notre application,
et ensuite aussi je vais déclarer le contacttype comme une variable
qui est du tableau de chaînes contacttype.
Parce que je dois en faire usage dans notre application.
Pour construire le formulaire réactif dans le constructeur,
j'injecterais le FormBuilder dans le constructeur ici,
et je créerais une méthode distincte appelée
CreateForm que j'invoquerai dans le constructeur,
donc lorsque cette classe est construite, le formulaire sera créé.
Donc, le CreateForm sera une méthode dans laquelle je vais créer le formulaire réel.
Alors, permettez-moi d'ajouter la méthode CreateForm ici.
C'est juste la commodité que j'aurais pu simplement
inclure le code directement dans le constructeur lui-même,
mais vous verrez qu'il pourrait y avoir des raisons pour lesquelles vous
pourrait avoir besoin d'appeler ce CreateForm à partir d'autres endroits.
Donc, il est préférable de le mettre dans une méthode distincte ici.
Donc, je vais créer le formulaire ici, formulaire réactif,
, puis le mettre dans la variable feedbackForm que j'ai déclarée plus tôt.
Donc, pour créer le formulaire,
je vais prendre l'aide du FormBuilder,
le FB que j'ai déclaré chez le constructeur,
et ensuite le FB fournit une méthode appelée Group qui me permet de définir un groupe, un FormGroup ici.
Donc, à l'intérieur, maintenant je vais construire les parties de la forme là-bas.
Donc, dans ce groupe,
maintenant je peux inclure les différents contrôles de formulaire là-bas.
Donc, je mettrais d'abord le prénom,
puis le nom de famille.
Notez comment les champs de mon formulaire sont
reflétant étroitement les champs de ma classe de commentaires.
Ils n'ont pas à correspondre exactement, mais s'ils correspondent,
alors transférer les données entre
le modèle de données et les quatre modèles devient beaucoup plus simple.
Telnum que je vais laisser parce que uh-
J'ai ajouté prénom, nom,
Telnum, email, et d'accord, et type de contact,
que je vais définir comme aucun pour commencer.
Rappelez-vous que le type de contact est un tableau de chaînes contenant trois d'entre eux
, vous devez donc choisir l'un d'eux, puis le mapper dans cette propriété ici.
Donc, je vais choisir ceci comme aucun et ensuite message,
qui sera le retour que l'utilisateur donne à propos de
notre restaurant mappé dans une chaîne ici.
Donc, ce sont les différents champs qui feront partie de notre formulaire ici.
Donc, une fois que nous avons la structure du formulaire en place ici,
donc vous remarquez que lorsque cette méthode est appelée,
cette forme sera la forme réactive sera créée dans le code ici.
Maintenant, nous devons mapper cela dans la vue,
dans le modèle là-bas.
Donc, nous allons le faire dans la prochaine étape.
Donc, maintenant, en allant à notre fichier de modèle,
dans le fichier de modèle de composant de contact,
nous allons faire défiler vers le bas et ensuite l'inclure dans
notre fichier de modèle juste après cette div ici,
donc nous avons cette div dans notre vue de contact qui contient les informations de localisation et ainsi de suite.
Juste après cela, je vais créer un autre div à l'intérieur
que nous allons héberger la forme réactive là-bas.
Permettez-moi d'appliquer quelques choses de mise en page flex
ici à mon div.
Maintenant, cette taille de formulaire comme vous pouvez le voir devrait être
une classe CSS que je vais créer un peu plus tard.
A l'intérieur de cette div, je vais héberger mon formulaire.
Donc, une fois que j'ai mis ce div dans mon fichier template,
maintenant laissez-moi commencer avec un titre pour cela.
Alors, nous dirons : « Envoyez-nous vos commentaires. »
Donc, vous cherchez les commentaires des visiteurs de votre site.
Nous allons commencer à construire le formulaire.
Donc, laissez-moi commencer par la balise de formulaire
ici et ensuite nous allons construire le formulaire à l'intérieur de cette balise de formulaire ici.
Donc, pour le formulaire, la première chose que je vais faire est d'appliquer
la non validation parce que la validation sera prise en charge par angulaire,
et ensuite appliquer un groupe de formulaire ici.
Donc, remarquez que ce groupe de formulaires est celui qui va me lier dans le modèle de formulaire réactif
que j'ai créé dans mon code ici.
Donc, en faisant cela,
nous attachons dans cette forme réactive dans le modèle à
le modèle de formulaire correspondant dans notre fichier dactylographié là-bas.
Donc, la façon dont nous faisons cela est de déclarer le groupe de formulaire et le formulaire de rétroaction.
Je vais vous montrer comment vous liez
les éléments de formulaire restants à
les propriétés correspondantes dans le modèle de formulaire dans un court laps de temps.
Donc, après avoir fait cela,
mettons nos éléments de formulaire en place à l'intérieur de ce modèle de formulaire.
Donc, je vais déclarer un P ici et puis à l'intérieur, j'utiliserai le mat-form-field ici,
à laquelle j'appliquerai une classe CSS appelée Half-width,
et fermerai ceci.
Donc, cela mettrait mon premier contrôle de formulaire en place ici.
Donc, ici, je vais mettre l'entrée et ensuite appliquer le MatinPut du matériau angulaire ici.
Pour lier ceci dans la propriété à l'intérieur de mon modèle de formulaire,
, je devrais faire FormControlName,
et le premier est le prénom.
Donc, de cette façon, cette entrée est maintenant liée à la propriété de prénom
que j'ai définie dans mon modèle de formulaire que j'ai défini dans le code.
Le prénom, puis je vais définir
l'espace réservé comme prénom.
Donc, comme vous pouvez vous y attendre,
ce champ de saisie va être utilisé pour taper
le prénom de l'utilisateur, tapez texte.
Fait intéressant, vous voyez que nous n'avons plus le modèle ng-ici
ou aucune des variables de modèle et ainsi de suite dans mon formulaire.
Les formes réactives fonctionnent différemment.
Ainsi, comme vous le voyez dans les formulaires réactifs,
vous mappez le groupe de formulaires, puis vous essayez les noms de contrôle de formulaire.
Si vous créez des contrôles de formulaire avec la classe de contrôle de formulaire,
, vous le déclarez comme contrôle de formulaire entre crochets, puis faites correspondre
avec le contrôle de formulaire correspondant que vous créez dans votre type sceptique.
Mais maintenant que nous utilisons le constructeur de formulaire,
Je suis seulement nécessaire de lier dans le groupe de formulaire comme
ceci dans mon formulaire au modèle de formulaire correspondant,
et ensuite le reste d'entre eux,
Je déclare comme nom de contrôle de formulaire et ensuite les faire correspondre à
les propriétés correspondantes dans
le contrôle de formulaire que j'ai dans mon dactylographie de la manière du code.
Donc, cela va créer le champ de prénom là-bas.
Laissez-moi copier ceci.
J'ai besoin d'un nom ici.
Donc, je vais copier ceci et ensuite dire que le nom du contrôle de formulaire est Nom,
et l'espace réservé est Nom,
et du type Texte, ici.
J'avais le prénom,
J'avais le nom de famille et si vous regardez le modèle de contrôle de formulaire,
vous verrez qu'après le prénom et le nom de famille,
J'ai le numéro de téléphone comme suivant,
donc je vais coller ceci ici.
Ensuite, le nom de contrôle de formulaire ici est Telnum,
et l'espace réservé est Numéro de téléphone,
et le type est Tel.
Pendant que nous y sommes,
Je vais lier le Requis dans ceux-ci bien que ce n'est pas vraiment nécessaire.
Mais permettez-moi d'ajouter ça là-dedans.
Maintenant, numéro de téléphone alors j'ai email.
Donc, le champ suivant est Email,
et l'espace réservé est Email,
et le type est également.
Donc, maintenant j'ai le prénom,
nom de famille, numéro de téléphone et email.
La prochaine chose que je vais ajouter est un toggle.
Auparavant, nous utilisons la case à cocher.
Le slidetoggle est un autre contrôle de forme que le matériau angulaire fournit,
qui est quelque peu différent de la case à cocher et
j'ai pensé que je vais vous illustrer en l'utilisant dans le formulaire ici.
Maintenant, c'est là que je vais utiliser une table pour positionner ces éléments.
La raison en est que,
ces éléments sont difficiles à positionner sans utiliser de table.
Donc, à l'intérieur de la table,
Je suis sûr que vous savez tous comment utiliser la table,
J'ai essayé de les positionner en utilisant la disposition flexible standard
et n'a pas très réussi avec cela.
Donc, à la place, j'ai eu recours à une table pour positionner ces deux éléments dans mon formulaire.
Donc, mat-slide-bascule.
Donc, le slidetoggle est comme la case à cocher,
vous pouvez l'activer et désactiver,
et cela est autorisé à sélectionner une valeur booléenne ici.
Donc, slidetoggle et le FormControlName est d'accord.
Si vous vous souvenez, nous étions d'accord,
qui était une propriété booléenne dans le contrôle de formulaire.
Alors, pour cela, je dirais,
pouvons-nous vous contacter ?
Maintenant, il vous sera plus clair quand vous verrez la version finale de
ce formulaire pour comprendre pourquoi nous faisons cela.
Maintenant, nous allons juste mettre toutes les parties dans ma forme réactive ici.
La deuxième partie, je vais utiliser un select,
qui est pris en charge par le composant mat-select dans le matériau angulaire.
Donc, MD sélectionnez et pour cela l'espace réservé,
Je vais définir comme « Comment ? »,
et FormControlName avec lesquels je vais lier ceci est
« contacttype » et fermer le MD select.
Donc, cela me permet de créer un élément select dans mon formulaire.
Donc, l'élément select est quelque chose qui me donne
une liste déroulante à partir de laquelle je peux sélectionner l'un d'eux.
Donc, pour créer la liste déroulante,
je vais utiliser l'option mat-qui est disponible en tant que composant dans le matériau angulaire.
Ainsi, l'option mat-est incluse dans le mat-select.
Donc, pour l'option,
Je vais faire *ngFor,
et je suis sûr que vous vous souvenez de la directive ngFor de plus en plus tôt,
*ngFor « Let ctype de contactType. »
Maintenant, vous voyez pourquoi j'ai déclaré la variable de type de contact
dans mon code plus tôt et puis je dirais, [value] = « ctype. »
Donc, je mets en place mon option dans mon select ici et en utilisant l'interpolation,
Je vais taper ctype ici.
Donc, cela me donnera un menu d'option déroulant dans mon formulaire là-bas.
Donc, c'est la partie suivante et enfin,
après la table, je vais mettre dans une zone de texte ici.
Donc, je dirais p et fermerais ce P. Pour coiffer la forme réactive,
l'élément P me permet de positionner correctement les éléments.
Donc, c'est pour ça que je l'utilise.
Donc, comme vous vous en souvenez,
mat-form-field me permet d'inclure un conteneur d'entrée ici et puis à l'intérieur, je vais définir une zone de texte,
que j'applique
la directive MatinPut à cela.
Alors, le FormControlName, je vais donner comme « message ».
Donc, cet élément de formulaire particulier permet à l'utilisateur de taper
dans le message de feedback pour mon restaurant.
Donc, espace réservé « Your Feedback »,
et puis je vais donner à la zone de texte une taille de
12 lignes ici, puis fermer la zone de texte.
Donc, ici, nous avons une zone de texte avec les 12 lignes.
Donc, cela complète la plupart du formulaire.
Désolé, cela devrait être en dehors de la table.
Nous avons besoin d'un bouton pour soumettre le formulaire.
Donc, juste là, j'inclurai un bouton du type="submit » et
ce bouton de soumission, j'appliquerai
le mat-button et appliquerai également la classe ="background-primary ».
Vous m'avez vu appliquer cela au bouton dans l'exercice précédent aussi,
type similaire de bouton.
Alors, maintenant mon formulaire est presque prêt.
Vous pouvez ajouter quelques classes CSS au composant contact.
Les trois classes que j'ai utilisées sont pleine largeur,
ceci est utilisé pour définir la taille des éléments là-bas.
Donc, pleine largeur 95 pour cent, demi-largeur.
Donc, cela me permet de dimensionner les éléments correctement,
45 pour cent demi-largeur, puis form-size.
Donc, j'utilise ces classes CSS dans mon formulaire.
Donc, avec cela, sauvegardons les changements,
et jetez un coup d'œil au formulaire dans notre application.
Aller dans le navigateur,
dans la vue contact,
lorsque vous faites défiler vers le bas, vous voyez maintenant le formulaire en place dans la vue contact ici.
Donc, vous voyez le envoyez-nous vos commentaires,
le prénom, le nom de famille, le numéro de téléphone,
l'email et la diapositive bascule ici,
donc vous voyez la diapositive basculer en place là et puis c'est cette sélection.
Le select me permet de sélectionner l'un de ces trois.
La valeur par défaut est none, puis la zone de texte ici,
me permet de taper mes commentaires ici, puis le bouton de soumission.
Donc, cela complète le formulaire réactif dans
ma demande mais quand vous cliquez sur le bouton Soumettre,
vous ne pourrez pas soumettre ce formulaire.
Donc, nous devons ajouter le ngSubmit à notre formulaire dans le modèle
, puis ajouter une méthode dans notre fichier de script de type.
Aller à notre code,
au formulaire ici,
avec le formulaire novalidate FormGroup,
Je vais ajouter dans un ngSubmit au formulaire.
Je vais appeler la méthode comme méthode onSubmit.
Donc, avec cela, mon formulaire est maintenant prêt à soumettre des informations.
J'ai besoin d'aller dans les composants de contact,
type fichier script, puis créer la méthode onSubmit ici.
Donc, dans la méthode onSubmit,
il se trouve que le modèle de formulaire est exactement le même que les modèles de données,
donc je peux simplement prendre la valeur du modèle de formulaire.
Donc, quand vous avez un modèle de formulaire comme ce formulaire Feedback,
le formulaire de feedback donne une propriété appelée value,
qui me permet de récupérer la valeur actuelle de tout cela à partir de mon formulaire de feedback.
Donc, cela formera un objet JavaScript,
que je peux alors mapper dans l'objet JavaScript de feedback.
Il se trouve que les deux ont exactement la même structure,
le modèle de données et le modèle de formulaire.
Donc, c'est pourquoi je suis capable de charger rapidement la valeur
directement dans le modèle de données lorsque l'utilisateur soumet le formulaire.
Si votre modèle de données est quelque peu différent du modèle de formulaire,
vous devez mapper explicitement dans les propriétés individuelles et
cela peut être fait à l'intérieur de cette méthode.
Juste pour vous montrer que le formulaire est soumis correctement,
Je vais enregistrer la valeur sur la console, la console JavaScript.
Alors je dirais, this.feedbackform.reset.
La méthode reset vous permet de réinitialiser le formulaire à son état normal,
supprimant toutes les entrées que vous avez faites dans le formulaire.
Donc, une fois que l'utilisateur soumet,
vous captureriez normalement les valeurs, puis réinitialisez le formulaire afin
que d'autres entrées peuvent être effectuées sous forme distincte.
C'est donc la méthode de reset que nous allons utiliser ici.
Donc, avec ces changements,
sauvegardons les changements et allons voir notre formulaire en action.
Une dernière petite chose que je veux ajouter à mon modèle est de vous montrer
les valeurs de formulaire à l'intérieur de mon formulaire lui-même,
bien que dans une vraie application,
vous ne feriez pas cela mais je voulais juste vous illustrer comment
vous pouvez voir les valeurs de feedbackForm directement ici,
de la Modèle FeedbackForm.
Donc, je peux le faire ici.
Je peux dire feedbackForm.value et acheminé par json pour montrer ici.
De même, je peux le faire ici, FeedbackForm.
Il y a une autre propriété associée à ce modèle de formulaire appelé status,
qui me montre l'état du formulaire en ce moment,
qu'il soit valide ou non.
Donc, je vais ajouter ces deux-là dans mon formulaire ici,
afin que cela soit montré dans mon modèle.
Ceci est juste pour vous donner une vue instantanée de ce que
le modèle de formulaire contient dans mon fichier de script de type.
Sauvegardons les changements et allons jeter un coup d'œil à notre formulaire.
Pour revenir à notre navigateur,
, vous pouvez maintenant voir que les valeurs de formulaire sont affichées
ici et que le formulaire est en bonne forme pour nous permettre de taper les valeurs.
Alors saisissons quelques valeurs aléatoires ici et vous pouvez
voir immédiatement la valeur est reflétée dans le modèle FeedbackForm là,
juste en haut et email.
Ça n'a pas d'importance, il suffit de taper quelque chose.
Ensuite, ce commutateur à bascule,
vous pouvez voir que lorsque vous l'allumez et éteignez,
le changement d'accord passe de faux à vrai.
Alors laissez-moi le laisser à vrai puis le select.
Laissez-moi sélectionner email et puis vous voyez que le type de contact ici a changé pour email.
Donc, c'est ainsi que vous choisiriez de changer la valeur.
Donc, disons email et puis ici,
, nous pouvons taper le message.
Un texte aléatoire ici et vous seriez
capable de voir que le texte aléatoire est reflété dans le message là-bas.
Soumettons le formulaire.
Donc, lorsque vous cliquez sur le Soumettre vous voyez immédiatement dans la console,
la valeur étant imprimée ici,
dans cet objet ici.
Vous pouvez donc parcourir pour voir toutes les propriétés de cet objet,
le modèle de formulaire de rétroaction.
Donc, ceci est une illustration d'une forme réactive dans notre application.
Ceci termine cet exercice.
Dans cet exercice, nous avons vu comment créer
une forme réactive dans notre application Angular.
C'est aussi un bon point où vous pouvez faire un commit Git avec le message,
réactif forme la première partie.