Nous venons d'apprendre sur le support Angular pour les formulaires,
et en particulier, la forme pilotée par les modèles.
Dans cet exercice, nous allons créer un formulaire basé sur un modèle, puis inclure ce
dans notre dialogue de composant de connexion que nous avons créé dans l'exercice précédent.
Dans cette conférence, le formulaire basé sur le modèle que nous créons,
permet à l'utilisateur de taper son nom d'utilisateur et son mot de passe dans le formulaire de connexion,
et ensuite soumettre cette information à notre application.
Maintenant, comment ces informations sont traitées par le côté serveur,
qui est laissé à un cours ultérieur.
Mais pour le moment, nous avons un moyen de capturer le nom d'utilisateur et le mot de passe
soumis par l'utilisateur via le formulaire basé sur le modèle de connexion,
que nous allons concevoir dans cet exercice.
En procédant à l'exercice,
la première étape pour pouvoir tirer parti de l'utilisation
des formulaires pilotés par modèle est d'aller dans le fichier app module.ts
, puis d'importer quelques modules de support pour notre application.
Donc, la première chose que je vais importer est
le MatFormFieldModule du champ de formulaire matériel Angular
.
Ainsi, cela nous permet de regrouper un tas d'éléments dans un champ de formulaire là-bas.
Ensuite, nous importerons également le MatinputModule.
Le module d'entrée prend en charge le composant d'entrée qui est
un composant de matériau angulaire stylisé
qui prend en charge le champ de formulaire d'entrée à partir de formulaires HTML ici.
Ensuite, aussi, permettez-moi d'importer un MatCheckBox,
le module correspondant de la case à cocher Angular Material.
Donc, ces trois prennent en charge
trois éléments de formulaire que nous allons utiliser lors de la création de notre application.
Le module champ de formulaire nous permet de regrouper un tas d'éléments de formulaire.
Le module d'entrée nous permet de créer un champ d'entrée là-dedans.
Le module de case à cocher, comme vous pouvez vous y attendre,
nous permet de créer une case à cocher.
De plus, j'ai également besoin d'importer
le FormsModule à partir de formes angulaires.
Le FormsModule est celui qui prend en charge les formulaires dans Angular.
C'est celui qui prend en charge les formulaires pilotés par modèle.
Donc, maintenant que nous avons importé ces, évidemment,
, l'étape suivante est d'aller dans le décorateur NgModule et ensuite de les mettre en place ici.
Donc, nous allons entrer ici et ensuite entrer le FormsModule.
Laissez-moi entrer le FormFieldModule,
le InputModule, le CheckBoxModule ici.
Ensuite, maintenant mon module d'application est prêt
pour prendre en charge l'utilisation de formulaires basés sur des modèles dans notre application.
Maintenant que nous avons terminé cela,
passons au composant login.
Une grande partie de notre travail est dans le composant login.
Laissez-moi d'abord concevoir le formulaire.
Donc, en allant dans le fichier de modèle de composant de connexion,
laissez-moi ajouter dans le modèle pour notre formulaire pour créer le formulaire ici.
Donc, en haut,
, je vais créer un p
qui affichera les informations que j'ai tapées dans le formulaire.
Dans le code, nous aurons une variable JavaScript appelée user,
qui sera liée aux champs de ce formulaire.
Maintenant, quand nous créerons cela,
deviendra plus clair.
Maintenant, ici, en incluant ceci,
ce que j'autorise est de montrer les changements.
Comme nous tapons des informations dans le formulaire,
les changements correspondants qui se produisent dans le code à
reflètent l'état du formulaire peuvent être affichés juste là.
Maintenant, en plus, maintenant je vais créer le formulaire ici.
Donc, nous allons entrer et ajouter l'élément de formulaire ici.
Pour cet élément de formulaire,
Je vais appliquer
l'attribut novalidate ici parce que
nous voulons que la validation du formulaire soit prise en charge par Angular et non
par la validation du formulaire HTML standard
ce support du navigateur.
Donc, nous allons transférer cette responsabilité dans notre application Angular elle-même.
Donc, c'est pourquoi je spécifie l'attribut novalidate pour mon téléphone.
Donc, cela crée mon formulaire ici.
À l'intérieur, je vais utiliser le mat-dialog-content.
Maintenant, le mat-dialog-content, comme vous pouvez vous y attendre,
est une zone qui contient le contenu de la boîte de dialogue elle-même.
Donc, c'est pourquoi nous avons mis ce mat-dialog-content ici.
Alors, ici, je vais créer mon formulaire ici.
Alors, j'ai mis un p là.
A l'intérieur de ce p, je vais utiliser un mat-form-field ici.
Donc, le mat-form-field me permet de regrouper un ensemble
d'éléments liés au formulaire que j'utilise ensemble.
Donc, ici, je vais mettre l'entrée ici.
Donc, le champ de formulaire d'entrée à partir des formulaires de fichier HTML.
Ensuite, j'appliquerai l'attribut MatinPut
qui nous permettra d'appliquer le style de conception du matériau pour cette entrée.
Ensuite, nous allons donner un espace réservé pour cela comme nom d'utilisateur,
et comme vous pouvez vous y attendre,
et le type sera de type texte ici.
Laissez-moi ajouter dans le ngModel.
Donc, un formulaire basé sur un modèle est pris en charge par l'attribut ngModel ici.
Donc, avec le NGModel.
Donc, vous pouvez voir la façon de la boîte de réception banane de déclarer cela.
Ensuite, nous dirons user.username.
Donc, cet utilisateur va être un objet JavaScript dans mon fichier TypeScript,
qui contiendra une propriété de nom d'utilisateur là-bas,
qui suivra la valeur que vous entrez dans ce champ de saisie dans mon formulaire là-bas.
Donc, c'est pourquoi nous attachons cette information de champ de saisie dans cet objet JavaScript.
Donc, c'est la liaison de données bidirectionnelle que nous faisons
entre l'élément de formulaire et le code JavaScript correspondant.
Ensuite, nous allons donner un nom comme nom d'utilisateur ici.
Donc, c'est mes premiers champs de formulaire que j'ai ajoutés ici.
Maintenant, de même, je vais ajouter dans le deuxième champ de formulaire pour le mot de passe.
Donc, pour cela, laissez-moi simplement copier ceci et ensuite coller ici.
Donc, le deuxième champ serait Input, MatinPut,
placeholder est password,
et ensuite le type est password.
Donc, l'élément d'entrée de mot de passe de support de formulaire HTML5.
Le NgModel lui-même sera lié au mot de passe de l'utilisateur et le nom sera mot de passe.
Donc, vous voyez que l'objet JavaScript utilisateur contient maintenant deux propriétés,
nom d'utilisateur et mot de passe, qui suivront les informations d'identification de l'utilisateur ici.
Donc, ces deux champs de formulaire à l'intérieur de ce p ici,
et puis aussi nous allons ajouter dans un
plus appelé comme mat-checkbox.
Vous avez vu que nous avions inclus le module de case à cocher plus tôt.
Donc, nous allons ajouter ceci.
Maintenant, cette case à cocher qui, une fois cochée, informera
mon application Angular que le nom d'utilisateur et le mot de passe doivent être enregistrés dans l'application.
Donc, laissez-moi lier ceci avec le modèle NG à
une propriété correspondante appelée remember dans l'objet utilisateur.
Donc, ce sera,
cette propriété sera vraie ou fausse selon
si la case est cochée ou non cochée.
Donc, c'est comme ça que nous suivons.
Donc, nous faisons la liaison de données bidirectionnelles entre cette case à cocher et
cette propriété appelée souvenir de l'objet JavaScript utilisateur dans mon code là-bas.
Alors le nom serait se souvenir,
et ensuite nous donnerons une étiquette comme se souvenir de moi.
Donc, lorsque l'utilisateur vérifie cela,
alors les informations de l'utilisateur seront mémorisées ici.
Donc, c'est la case à cocher mat-que nous avons ajoutée.
Donc, nous avons trois champs ici,
le nom d'utilisateur, le mot de passe,
et ensuite une case à cocher ici dans mon formulaire ici.
Donc, ceci est un contenu de mat-dialogue ici.
Maintenant, en plus du contenu mat-dialogue,
Je peux également ajouter des actions mat-dialogue ici.
Maintenant, les actions de dialogue peuvent contenir les boutons correspondant à cette boîte de dialogue.
Donc, c'est ce qui agira comme les boutons d'action dans le dialogue,
et aussi comme ils sont enfermés dans le formulaire,
ces boutons agiront aussi comme boutons de soumission de formulaire pour moi.
Donc, ici, laissez-moi faire un espaceur flex de classe span,
, puis laissez-moi ajouter un bouton,
mat-button, et puis ce bouton,
Je vais aussi le transformer en un bouton de fermeture mat-dialog.
Donc, ce serait un bouton d'annulation que je vais inclure dans mon formulaire ici,
alors ceci est cliqué le dialogue sera rejeté,
et essentiellement ce qui signifie que vous ne soumettez pas le formulaire là-bas.
Donc, cela agit aussi comme le bouton d'annulation pour le formulaire,
et ensuite rejetant également le dialogue en même temps.
Donc, en utilisant cet attribut à ce bouton,
nous déclarons ceci comme le bouton qui rejette la faute,
de la même manière que nous avons ce bouton dans la barre d'outils.
Donc, la boîte de dialogue se ferme là.
Ensuite, l'autre bouton que nous aurons est
pour soumettre de sorte que
ce type de bouton serait le bouton de soumission à l'intérieur d'un formulaire là-bas.
Donc, quand on clique sur ceci,
qui déclenche la soumission du formulaire pour ce formulaire ici,
et puis laissez-moi ajouter dans une classe à ceci,
nous dirons fond primaire, et texte floral.
Ces classes que j'ai déjà ajoutées dans mon fichier Styles.acss là-bas.
Donc, texte floral blanc,
et ce bouton serait étiqueté comme le bouton de connexion là-bas.
Donc, ce serait un bouton de couleur bleue qui sera affiché à l'écran là-bas.
Donc, avec cela, ma structure de formulaire est créée dans le modèle là-bas.
Maintenant, l'étape suivante consiste à entrer dans le code et ensuite gérer la soumission du formulaire lui-même.
Donc, maintenant va se connecter au fichier component.ts,
nous devons gérer la soumission du formulaire ici.
Maintenant, la première étape que je vais faire est quand ce composant de connexion est créé,
nous allons créer un objet utilisateur ici avec le nom d'utilisateur des propriétés,
qui serait une chaîne vide pour commencer par,
mot de passe qui sera également une chaîne vide pour commencer,
, puis rappelez-vous ce qui est faux.
Maintenant, en déclarant ceci ici,
nous disons aussi que nous pouvons maintenant lier
ces trois propriétés aux trois éléments de formulaire de mon modèle.
Donc, c'est ce que nous avons fini par réaliser ici.
Pour le constructeur, laissez
m'injecter le dialogue ref ici,
mat-dialogue ref, et ce mat dialogue ref prendra le composant correspondant.
Donc, ceci est une référence à ce composant de connexion ici.
Donc, cela nous dit quand cette- quand cela est soumis,
comment gérer cela.
Donc, ici, laissez-moi ajouter dans une fonction on submit ici,
et à l'intérieur de la fonction on submit,
Je vais simplement me connecter,
enregistrer les informations correspondantes des utilisateurs,
alors l'utilisateur clique sur le formulaire de connexion,
le formulaire de connexion et soumet le formulaire de connexion.
Je vais juste enregistrer les informations de l'utilisateur sur la console pour le moment.
Plus tard, nous allons concevoir dans le cours côté serveur.
Nous allons gérer le processus de connexion réel lorsque
notre serveur sera prêt et sera capable de gérer la connexion de l'utilisateur.
Donc, après cela, nous dirons ce dialogue ref close.
Maintenant, pourquoi incluons-nous cela ici ?
Donc, lorsque le formulaire est soumis,
nous voulons également rejeter le composant là,
le composant de dialogue là-bas.
Donc, en appelant ceci,
ce dialogue ref close,
nous demandons que la composante dialogue soit fermée ici.
Donc, c'est la raison pour laquelle j'ai une référence au composant login ici,
qui agit comme mon composant de dialogue ici.
Donc, nous serons en mesure de fermer le composant de dialogue en faisant cela.
Donc, une fois que l'utilisateur soumet le formulaire,
vous enregistrerez les informations de l'utilisateur,
puis fermez la boîte de dialogue. C'est ça.
Sauvegardons les modifications, puis allons jeter un oeil à l'application mise à jour.
Allez dans notre application dans le navigateur,
laissez-moi ouvrir la console JavaScript afin que vous puissiez voir les informations en cours de connexion.
Laissez-moi ouvrir la boîte de dialogue de connexion ici avec le formulaire déjà en place,
le nom d'utilisateur et le mot de passe déjà en place.
Alors, laissez-moi taper le nom d'un utilisateur.
Je suis narcissique ici.
Donc, je saisis le nom d'utilisateur et le mot de passe ici.
Maintenant, notez qu'en tapant les informations ici,
puisque je montre la valeur de l'objet JavaScript utilisateur ici,
toutes les modifications que je fais sont immédiatement reflétées à l'écran ici.
Aussi la case se souvenir étant cochée et désactivée ici.
Ensuite, quand je soumets le formulaire ici,
vous pouvez voir que dans la console,
les informations de l'utilisateur sont enregistrées sur la console,
le nom d'utilisateur, le mot de passe,
et la valeur de rappel est verrouillée sur la console.
Donc, vous pouvez maintenant voir que mon formulaire de connexion,
le formulaire piloté par modèle fonctionne correctement.
Avec cela, nous terminons cet exercice,
où nous avons vu comment nous pouvons concevoir un formulaire piloté par modèle dans notre application Angular.
C'est le bon moment pour vous de faire un Git Commit avec le message,
Modèles Driven Forms Partie 1.