[MUSIQUE]
Maintenant que nous avons eu une introduction rapide à la validation de formulaire réactif dans
la conférence précédente, passons à l'exercice suivant où nous pourrions
appliquer la validation de formulaire à la forme réactive que nous avons créée dans l'exercice précédent.
Donc, en allant dans notre fichier de texte de composant de contact,
ajoutons dans les validateurs de formulaire à chacune de ces propriétés dans notre modèle de formulaire.
Donc, pour le prénom, je dirais dans le tableau, Validators.
Requis, De même, je vais
appliquer la même chose à la, lastname.
Puis email, et aussi pour le telnum, donc pour
le telnum je dirais pour les trois restants que je peux les laisser ouverts,
parce que je suis d'accord avec soit être faux ou vrai et leur donner d'autres valeurs.
Parce que c'est un léger bascule et contacttype ne peut prendre qu'un
des trois valeurs et la valeur par défaut est déjà donnée là,
et pour le message, nous pouvons le rendre pas une valeur requise.
Si l'utilisateur ne veut pas taper de commentaires,
vous pouvez lui permettre de ne pas taper de commentaires, mais si vous le souhaitez,
vous pouvez ajouter les validators.Requis même pour le message.
De plus, lorsque vous réinitialisez le formulaire dans la méthode onSubmit ici
, vous pouvez également réinitialiser le formulaire à sa valeur initiale comme nous l'avons spécifié
dans la méthode où nous avons créé le formulaire.
Donc, dans la valeur de réinitialisation, il prend un objet comme paramètre ici.
Cet objet sera utilisé par la méthode reset en utilisant
la méthode set value que nous avons vu dans la conférence plus tôt pour réinitialiser
la forme à la condition telle qu'elle était quand elle est créée à l'origine.
Donc, ici, nous pouvons fournir des paramètres
comme prénom : '',
lastname : '', telnum : 0,
Puis email : '',
agree : false,
contacttype : 'Aucun',
message : '' '}) ;.
Donc, ces valeurs que nous avons fournies dans cet objet JavaScript
que nous nous donnons le paramètre de la méthode reset
auront exactement les mêmes valeurs que nous avons vu pour
ces propriétés lorsque nous avons créé ce formulaire de rétroaction.
Nous devons également réinitialiser complètement le formulaire dans le modèle.
Donc, pour ce faire, pour revenir à l'importation ici, et
alors nous importerons également le viewChild} de '@angular /core' ;.
Cela nous permettra d'avoir accès à
n'importe quel élément dom enfant dans mon modèle.
Donc, après avoir fait cela, entrant dans le code,
ici dans le ContactComponent, je peux dire @ViewChild,
et ensuite je serai capable de me référer au FeedbackForm en lui donnant une variable de modèle avec le nom fform.
Vous allez le faire à l'étape suivante, et puis pour cela,
je vais faire référence à cela en utilisant FeedbackFormDirective.
Ainsi, cela nous permet d'accéder au formulaire de modèle, puis de le réinitialiser complètement
, de sorte que le formulaire lui-même soit réinitialisé à sa valeur immaculée.
C'est donc une autre étape supplémentaire que nous devons faire pour nous assurer que le formulaire est
complètement réinitialisé à sa valeur initiale ici.
Maintenant, après avoir fait cela dans la méthode onSubject, après avoir réinitialisé l'objet feedbackForm
lui-même ici, nous devons également ajouter
dans this.feedbackFormDirective.resetForm () ;
.
Donc, cela garantira que mon feedbackForm est complètement réinitialisé à sa valeur
vierge à ce stade.
Donc, après ces changements, allons maintenant dans notre fichier
template pour montrer comment nous pouvons refléter ces erreurs
dans notre modèle pour notre formulaire là-bas.
Donc, passer au fichier de modèle.
Donc, d'abord, nous allons aller sur le bouton ici, et
puis nous allons rendre le bouton désactivé.
Si le « FeedBackForm n'est pas valide ».
Donc, le bouton ne sera activé que lorsque le FeedBackForm est valide.
En passant à ce formulaire, permettez-moi d'ajouter en
le <mat-error *ngif="feedbackForm.get » get
('firstname') .hasError ('requis')
&&
feedbackForm.get ('firstname')
.touched », et le message est Prénom est requis.
Donc ce serait le message que vous attribuez en utilisant une seule ligne avec le caché,
avec cette information là.
Laissez-moi appliquer la même chose au nom de famille,
Numéro de téléphone, et à l'email.
Donc, je vais juste copier, coller, et les éditer,
afin que vous puissiez continuer avec ceux-ci, et ('lastname').
Nom de famille.
Telnum.
Donc, j'applique cela à ('telnum').
Encore une fois, la même idée derrière cela et ensuite aussi à l'email.
('email').
Ajoutons la variable de modèle nommée fform au formulaire.
Donc, je tape #fform ="NGForm ».
Aller à notre formulaire dans le navigateur, laissez-moi taper le prénom,
et vous voyez que même si je supprime la valeur restera verte,
parce que nous avons utilisé le touché là-bas.
Mais dès que je m'en éloigne alors vous
serez en mesure de voir que cela devient une couleur rouge.
Donc, de même pour le nom de famille, vous verrez que lorsque je
supprime la valeur de nom, alors cela est affiché là de la même manière.
Laissez-moi entrer le prénom et le nom de famille, et pour l'email aussi.
Le, Même cas pour le numéro de téléphone aussi.
Ainsi, vous pouvez faire la validation de formulaire dans notre application.
Avec cela, nous terminons cet exercice où nous avons
ajouté en validation de formulaire à notre formulaire réactif.
C'est le bon moment pour vous de faire un commit git avec le message,
réactif forme la deuxième partie.
[MUSIQUE]