Maintenant que nous avons appris sur le support de validation de formulaire basé sur le modèle
dans Angular dans la conférence précédente,
appliquons ce que nous avons appris à
le formulaire de connexion que nous avons conçu dans l'exercice précédent.
Nous ferons une simple validation de formulaire pour le formulaire de connexion.
En particulier, nous spécifierons le nom d'utilisateur et le mot de passe requis,
, puis vérifierons que l'utilisateur saisit les informations dans ces champs,
et sera en mesure d'afficher des messages d'erreur lorsque les champs sont vides.
Poursuivons cette modification de l'application dans cet exercice.
Pour commencer à cet exercice,
allons au formulaire de connexion ici,
que nous avons dans le modèle de composants de connexion ici.
Nous avons déjà ajouté dans l'attribut novalidate au formulaire de connexion.
Donc, ajoutons dans la variable de modèle appelée LogInform à ce modèle,
, puis définissons ceci à ngForm comme nous l'avons compris dans la conférence précédente ici.
Donc, en faisant cela,
nous spécifions que cette variable de modèle nous permet de suivre l'état du formulaire.
Donc, nous pouvons même vérifier l'état valide ou non valide pour ce formulaire.
Maintenant, en plus, pour chacune de ces entrées,
nous allons également ajouter dans les variables de modèle correspondantes ici.
Alors, laissez-moi passer à la ligne suivante ici,
et là je dirai que le nom d'utilisateur est ngModel.
Ensuite, nous allons également spécifier ceci comme requis ici.
De même, pour le mot de passe,
nous allons ajouter dans la variable de modèle correspondante ici comme mot de passe est dans ngModel,
et ensuite spécifier ceci comme requis ici.
Donc, maintenant que nous avons spécifié les variables de modèle,
nous pouvons ensuite effectuer certaines vérifications de validation de formulaire ici.
Maintenant, parce que nous spécifions cela comme requis,
cela signifie que si ces champs,
les champs d'entrée sont vides,
alors l'erreur requise sera signalée pour cela.
De même, maintenant que nous avons la variable de modèle pour le formulaire,
nous pouvons facilement l'utiliser pour vérifier et désactiver le bouton Soumettre ci-dessous.
Donc, pour le bouton Soumettre,
ce que nous faisons ici est d'utiliser
le champ désactivé ici,
et ensuite nous allons définir le champ désactivé
à Loginform.form.Invalid.
Donc, en faisant cela,
, nous allons désactiver ce bouton lorsque le formulaire n'est pas valide.
Ainsi, l'utilisateur ne peut même pas soumettre le formulaire lorsque le formulaire contient une entrée non valide.
Donc, par exemple, si le nom d'utilisateur est vide ou le mot de passe est vide,
alors le formulaire de connexion sera invalide,
et donc l'utilisateur ne peut pas soumettre ce formulaire.
Maintenant, c'est une partie de la validation du formulaire que nous pouvons faire,
par laquelle nous pouvons empêcher le formulaire d'être soumis.
De plus, pour chacun de ces champs,
, nous pouvons même afficher un message d'erreur pour
indiquer quel type d'erreur se produit dans ce champ particulier.
Donc, pour ce faire,
à chacun de ces éléments de champ de formulaire,
nous allons ajouter la balise mat-error là,
et ensuite nous dirons stop nGiF,
et nous dirons username.errors.
Donc, notez que nous avons déjà donné à ce modèle une variable appelée username,
afin que nous puissions utiliser dans username.errors s'il y a des erreurs et
si ce type d'erreur est nécessaire.
Donc, si l'erreur est un type d'erreur requis qui est la cause là,
alors à ce stade,
nous pouvons spécifier que l'erreur correspondante à afficher est le nom d'utilisateur est nécessaire.
Donc, c'est l'erreur qui va être affichée pour ce champ ici.
De même, permettez-moi d'ajouter le même genre de chose pour le champ de mot de passe ici.
Alors, laissez-moi copier cela et ensuite coller ici,
et ensuite nous dirons mot de passe .errors.
Ensuite, le message sera mot de passe est requis.
Donc, en ajoutant ceci,
, nous afficherons des messages d'erreur en dessous de
ces champs lorsque le champ ne contient aucune information.
Correction mineure ici.
Cela devrait être un nom d'utilisateur ?errors.Requis ici,
et de même, celui-ci devrait également être .Requis ici.
Donc, avec ces modifications,
mon composant login est maintenant prêt
pour faire la validation du formulaire, puis afficher des messages d'erreur.
Alors, sauvegardons les modifications, puis allons jeter un oeil à l'application mise à jour.
En allant à notre application dans le navigateur,
ouvrons le formulaire de connexion ici.
Donc, vous pouvez voir que maintenant le nom d'utilisateur et le mot de passe portent
une étoile pour indiquer qu'ils sont tous les deux requis.
Alors, laissez-moi taper.
Donc, ici, vous voyez que le formulaire est valide car il contient des informations,
et donc le bouton Connexion sera activé.
Permettez-moi de supprimer les informations du champ de mot de passe,
et puis vous remarquez immédiatement que
l'erreur est indiquée ici indiquant que le mot de passe est requis.
Notez également que le bouton Connexion ne sera plus activé.
Il sera désactivé. Donc, vous ne serez pas en mesure de soumettre le formulaire ici.
Mais dès que je saisis quelque chose dans le mot de passe,
puis le bouton Login sera activé,
et nous serons en mesure de soumettre le formulaire ici.
De même pour le nom d'utilisateur.
Si je supprime les informations de nom d'utilisateur là-bas,
alors vous verrez l'erreur s'afficher ici,
et aussi vous verrez que le bouton Connexion n'est pas activé à ce stade.
Donc, c'est ainsi que la validation du formulaire peut être effectuée dans ce cas.
Donc, comme vous l'avez vu,
en ajoutant en simple validation de forme à notre application,
nous pouvons vérifier pour nous assurer que
les champs contiennent les informations qu'ils sont supposés contenir,
et dans le bon format.
Nous allons examiner un peu plus de ce que la validation des formulaires dans l'un des exercices ultérieurs,
en particulier pour les formes réactives.
Avec cela, nous terminons cet exercice.
C'est le bon moment pour vous de faire un commit git
avec les formulaires pilotés par un modèle de message, deuxième partie.