Nous avions traité des formes réactives dans l'une des leçons précédentes,
où nous avons fait deux exercices traitant des formes réactives,
comment nous les créons,
et ensuite faire une validation de forme de base sur les formes réactives.
Nous continuerons avec le thème de cette leçon,
parce que les formes réactives comme son nom l'indique,
a quelque chose à voir avec la programmation réactive comme vous pourriez l'avoir prévu.
Maintenant, les formulaires réactifs vous permettent également de regarder les changements dans les valeurs des éléments de formulaire,
en utilisant un observable que Angular rend disponible appelé ValueChanges.
Nous utiliserons les ValueChanges observables dans cet exercice,
afin de suivre les modifications apportées aux valeurs de
leurs différents éléments de formulaire et de déclencher immédiatement la validation du formulaire.
Dans cet exercice, nous allons faire la plupart de la validation du formulaire dans le code
plutôt que dans le modèle lui-même,
comme nous l'avons fait avec la validation de la forme du réacteur dans le deuxième exercice de formes réactives.
En allant à contact.component.tsfile,
, nous allons mettre à jour le formulaire réactif que nous avons créé ici,
en ajoutant quelques Validators supplémentaires pour certains de ces champs.
Donc, ici vous voyez que pour le prénom et
le numéro de téléphone et email nous avons ajouté les validateurs requis.
Pour le prénom et le nom de famille,
Je vais ajouter quelques Validators supplémentaires pour
la longueur minimale et la longueur maximale.
Maintenant, si vous avez plus d'un Validator dans votre forme réactive,
vous devez les déclarer en utilisant un tableau là-dedans.
Donc, cela doit être enfermé dans un tableau ici.
Donc, vous voyez que j'ai inclus le Validator requis dans un tableau.
Je vais ajouter dans un Validators, MinLength Validator.
Donc, pour la longueur minimale, je vais spécifier deux comme longueur minimale,
donc le prénom devrait contenir au moins deux caractères.
Aussi la longueur maximale que je vais
ajouter comme 25 caractères.
Donc, ici vous voyez que maintenant pour le prénom, nous avons trois Validations différentes,
toutes enfermées dans un tableau ici.
Validateurs requis, Validators MinLength,
et Validators MaxLength ici, 25.
Donc, je vais faire la même chose aussi pour mon nom de famille.
Alors, laissez-moi copier tout ce Rayon Validators ici,
et puis remplacer celui-ci par cet ensemble de Validators.
Maintenant, en outre, pour le numéro de téléphone,
comme vous vous souviendrez dans la version antérieure du formulaire,
le numéro de téléphone était prêt à accepter même les alphabets,
mais ce n'est pas correct.
Les numéros de téléphone sont généralement des numéros.
Donc, c'est là que nous allons utiliser un autre Validator
appelé Pattern Validators.
Donc, le validateur de modèle nous permet de spécifier un motif pour
les valeurs entrées dans cet élément de formulaire particulier,
, puis vérifier pour vous assurer que la valeur suit le modèle spécifié.
Donc, ici, le modèle que nous allons utiliser est que la valeur
ne devrait contenir que des nombres compris entre zéro et neuf.
Pour ajouter le motif,
nous devons le faire dans le fichier template comme nous le verrons dans un court laps de temps.
De même, pour l'email,
J'aurai aussi un autre Validator appelé Validator email.
Donc, nous ajouterons dans l'email Validators.
Cela signifie également que nous devons ajouter un attribut
appelé email à l'entrée dans notre fichier de modèle.
Maintenant, avec ces changements, ma validation de formulaire est devenue plus robuste dans cet exercice.
Maintenant, lorsque le formulaire connaît des changements dans l'un de ses éléments de formulaire,
alors le framework Angular fournit un observable appelé comme ValueChanges observable.
Donc, je vais utiliser les ValueChanges observables sur mon formulaire de rétroaction.
Donc, les ValeurChanges observables.
Ainsi, l'observable ValueChanges peut maintenant être abonné dans cette méthode particulière.
Donc, lorsque nous créons le formulaire lui-même,
, nous nous abonnerons aux Value Changes observables ici.
Maintenant, quand les ValueChanges,
donc en souscrivant à cet observable,
dans l'abonnement, je vais spécifier ce qui doit être fait lorsque les ValueChanges.
Donc, lorsque le valueChanges, j'obtiendrais quelques données ici,
de la ferme pour indiquer
quel élément de formulaire particulier a connu le changement de la valeur.
Ensuite, quand cela se produit,
, je vais déclencher une méthode locale que je vais implémenter appelée onValueChanged,
et ensuite fournir ces données en tant que paramètre à cette méthode.
Maintenant, à l'intérieur de cette méthode onValueChanged,
, je vais lancer la validation du formulaire,
et ensuite définir correctement les messages d'erreur de formulaire en fonction de ce que
cet objet de données que j'obtiens ici me spécifiera.
De plus, quand je crée le formulaire,
Je vais appeler la méthode onValueChanged sans aucun paramètre,
et cela serait utilisé pour
réinitialiser les messages de validation de formulaire.
Maintenant, comment créer les messages de validation de formulaire ?
Pour ce faire, je vais définir mes messages de validation de formulaire complètement dans le code ici.
Ensuite, à travers le code,
, je vais adapter les messages de validation de formulaire,
et qui serait ensuite utilisé pour afficher les messages d'erreur dans mon modèle de formulaire lui-même.
Donc, pour ce faire, ce que je vais faire est d'ajouter quelques objets JavaScript ici.
L'un des objets JavaScript que je vais ajouter est nommé comme erreurs de formulaire.
Donc, c'est un simple objet JavaScript que
contiendra toutes les erreurs pour le formulaire particulier ici.
Donc, dans les erreurs de formulaire,
, j'utiliserai quatre champs différents,
prénom, nom de famille.
Donc, comme vous vous en souvenez,
ceux-ci correspondent aux quatre éléments de formulaire sur lesquels je fais la validation du formulaire,
numéro de téléphone et email.
Maintenant, pourquoi puis-je définir cet objet JavaScript ici ?
Maintenant, cet objet JavaScript comme vous le voyez contient quatre éléments ici.
Maintenant, chaque fois que je fais la validation du formulaire,
rappellent que j'ai déjà spécifié que
je vais créer une nouvelle méthode appelée onValueChange.
Dans le onValueChange, la façon dont le code est écrit est que,
si une erreur est détectée,
une chaîne contenant le message correspondant à
cette erreur sera ajoutée dans cet objet JavaScript.
Donc, de cette façon dans mon code,
Je peux faire la validation du formulaire.
Maintenant, en plus de cela,
Je vais maintenant définir quelques messages de validation.
Maintenant, ce modèle particulier de faire les choses,
J'ai appris en lisant la documentation sur la validation des formulaires dans le site angular.io.
Donc, ils ont toute une documentation sur la façon de faire la validation des formulaires et un lien vers lequel est
disponible dans les ressources supplémentaires de
ce chapitre et aussi les chapitres précédents sur les formes angulaires.
Donc, dans ce document particulier, ils
prescrivent ceci comme un moyen de faire la validation de formulaire et j'ai trouvé cela très intuitif.
Donc, j'ai également adopté le même modèle pour faire la validation de formulaire dans le code.
Donc, avec ici,
Je vais définir les messages de validation pour tous les champs possibles ici.
Donc, pour le champ de prénom,
, je vais définir quelques messages de validation ici, donc je dirais,
« requis » et puis dire,
« le prénom est requis » comme ceci,
Je vais ajouter quelques messages de validation
ici et dire,
« Le prénom doit être
au moins 2 caractères de long » et puis je ajoutera également,
« longueur maximale » et le message correspondant serait,
« Le prénom ne peut pas être plus de 25".
Si vous avez un nom qui court en 25 caractères,
vous devez vraiment maudire vos parents pour cela, croyez-moi,
un de mes prénoms est un long deuxième prénom,
et que je n'utilise pas explicitement dans mes documents.
Mais, je peux comprendre la douleur,
si vous avez un nom long supérieur à 25 caractères.
Les gens de certains états du sud de l'Inde ont de longs noms,
mon état inclus, hey,
amusez-vous pendant que nous y sommes.
Ok, je vais aussi inclure la même chose pour le nom de famille.
Donc, je vais éditer ce
et spécifier la même chose que le nom de famille.
Ainsi, comme vous le voyez dans le code, vous pouvez spécifier un ensemble de messages d'erreur.
Maintenant, si vous ajoutez une nouvelle validation à vos formulaires,
tout ce que vous devez faire est,
venez ici et ajoutez le nouveau message d'erreur dans
cet objet JavaScript ici et votre code fonctionnera très bien, en tant que tel.
Donc, c'est l'avantage d'utiliser ce modèle pour concevoir votre validation dans le code.
Continuant, permettez-moi de définir la validation pour le numéro de téléphone et
les deux validation pour les numéros de téléphone qui se produirait est le « requis ».
Donc, je vais juste copier le « requis » à partir de là,
et le coller ici,
et je dirais,
« Numéro de téléphone est requis », et le prochain message d'erreur serait pour « motif ».
Donc, le message d'erreur dit,
« Le numéro de téléphone ne doit contenir que des numéros. »
Donc, c'est l'autre message, de même pour le courrier électronique.
Donc, comme vous pouvez le voir, les valeurs que j'utilise ici
correspondent aux noms de validateur que j'ai utilisés,
« mid length », « max length », « pattern ».
Donc, de même pour l'email,
vous verrez « requis » et « Email ».
Donc, je vais juste copier le « requis » ici et dire, « Email est requis ».
L'autre modèle que vous vous souvenez est pour l'email et je dirais,
« Email non au format valide ».
Donc, généralement si votre email ne contient pas
un signe @ et des caractères des deux côtés du signe @,
alors ce n'est pas un email valide.
Cet email Validator est déjà intégré dans le module de formulaires réactifs angulaires.
Donc, nous allons utiliser l'email Validator ici.
Donc, ici, nous avons tous les messages de validation définis dans le code.
Donc, cela rend très facile de les étendre pour des champs supplémentaires si vous le souhaitez et aussi
en ajoutant plus de messages de validation pour des validations supplémentaires
que vous pourriez introduire pour chacun de ces champs de formulaire.
Aussi, cette erreur de forme d'objet m'aide à suivre
toutes les erreurs associées à chacun des éléments de mon téléphone.
Donc, actuellement je ne vérifie que ces quatre éléments,
donc c'est pourquoi je n'ai que pour cela.
Correction mineure, la « longueur moyenne » devrait être min,
petit 'l' et longueur max aussi avec un petit 'l',
de même pour le nom de famille aussi.
Maintenant, nous allons écrire le code pour la méthode on values change.
Donc, je vais écrire la méthode
ici, « ValueChanged » et ensuite cette
prendra un paramètre, peut-être.
C'est pourquoi j'ai mis un point d'interrogation de données,
ce qui signifie que le paramètre est facultatif.
Donc, la première chose que je vais vérifier est, « ce formulaire de rétroaction »,
ce qui signifie que si le formulaire de rétroaction n'a pas été créé alors,
et si cette méthode est appelée,
alors vous devriez simplement « retourner » sans rien.
Ensuite, je vais définir une constante
appelée « ce feedback
formulaire » est juste pour faciliter la définition du reste du code,
alors je dirais, « pour
champ const dans ce .form erreurs ».
Donc, notez que ce champ prendra this.form errors,
l'objet d'erreurs de formulaire que nous avons défini plus tôt.
Donc, sentir signifie que je vais vérifier tous les quatre.
Donc, chaque fois que je détecte des changements,
le prénom, le nom de famille,
numéro de téléphone et un email.
Donc, c'est pourquoi ces quatre porteront exactement les mêmes noms que nous avons utilisés dans le formulaire ici,
et de sorte que le code écrit ici sera facile à utiliser.
Donc, je vais maintenant vérifier les champs de formulaire.
Ensuite, je voudrais d'abord
m'assurer que dans le cas où j'aurais précédemment attaché des messages à ces champs de formulaire,
les erreurs de formulaire s'y objectent,
alors je vais les effacer tous.
Donc, c'est pourquoi si vous appelez cela sans paramètre,
tous les champs d'erreur de formulaire seront effacés,
et alors je ferais, « control FormGet ».
Donc, notez que j'utilise ce champ lui-même pour faire un FormGet donc,
j'ai accès à ce champ de formulaire particulier.
Donc, notez que plus tôt nous faisions « feedbackform.this.feedbackform.get"firstname ».
et ainsi de suite. Donc, j'ai simplifié quoi dans cette constante particulière que nous
définissons ici et puis je dirai, « Si contrôle ».
Donc, ce qui signifie que si le contrôle n'est pas nul et « control.dirty ».
Donc, si ce champ particulier est déjà sale
et pas « control valid ».
Donc, signifie que pour chacun des champs,
Je vérifie littéralement si c'est valide,
si c'est sale,
et ensuite si le contrôle est déjà là.
Ensuite, je vais vérifier pour voir quel genre d'erreurs ont été ajoutées à
ce contrôle particulier par le formulaire là-bas.
Donc, ici, je dirai,
« messages const égaux
à ce champ .validation messages ».
Remarquez comment je ramasse
tous les messages de validation correspondant à ce champ particulier prénom,
lastname, ou telnum ou email,
et puis je vérifierai et verrai si j'ai besoin d'ajouter ceci dans le champ.
Alors, comment puis-je faire ça ?
Donc, nous faisons pour la clé const dans control.errors.
Donc, notez que ce contrôle est form.get field et .error,
donc je vérifie s'il y a des erreurs là-bas.
Ensuite, dans ce cas,
, j'ajouterai ce champ d'erreurs de formulaire.
Donc, pour cet élément particulier dans l'objet JavaScript que j'ai défini ici,
j'ajouterais la clé des messages
plus et de l'espace ici.
Donc, maintenant quel que soit l'enquête d'erreur de forme
ou le message correspondant sera pris et attaché dans,
et alors mon objet JavaScript erreurs de formulaire contiendra maintenant
tous les messages d'erreur attachés ensemble quand
ce particulier sur les valeurs modifiées rats de méthode.
Maintenant, ce morceau de code particulier que j'ai emprunté à
la documentation de validation du formulaire sur angular.iu.
J'ai trouvé que c'est une façon très intuitive de faire la vérification des erreurs de formulaire.
Alors, j'ai pensé pourquoi ne pas en faire usage dans notre exercice de formes réactives angulaires.
Donc, en ajoutant ce code là-dedans.
Maintenant, ma candidature est prête à faire la validation du formulaire pour mon formulaire réactif.
Donc, maintenant l'étape suivante est d'aller au contact component.html,
le fichier de modèle, puis mettez à jour le fichier de modèle.
Donc, en allant à ce fichier template,
nous allons maintenant passer au formulaire,
et dans ce formulaire maintenant au lieu de faire toutes ces vérifications dans le code,
nous pouvons maintenant simplifier beaucoup du code ici dans le fichier template ici.
Maintenant, au lieu de faire toutes ces vérifications,
ce que nous réalisons est que les erreurs de formulaire objet JavaScript dans
mon fichier dactylographié s'il y a des erreurs puis
l'objet JavaScript erreurs de formulaire pour ce champ particulier,
aura tous les messages d'erreur attachés à lui.
S'il n'y a pas d'erreurs,
alors ces messages d'erreur ne seront pas là.
Donc, c'est ce que je vais utiliser pour vérifier et
voir si je devrais afficher l'erreur de formulaire ou non.
Donc, d'ailleurs, au lieu de vérifier tout cela,
la seule chose que j'ai besoin de vérifier ici est FormErrors prénom, c'est tout.
Donc, très facile de vérifier les erreurs ici.
De même, donc tout ce code est maintenant simplifié ici,
et de même quand vous vérifiez le message ici,
ce que nous allons faire, je vais changer tout cela de
requis touché à FormErrors.FirstName.
C'est ça. Si cela existe,
alors tous les messages d'erreur correspondant à cela seront déjà là,
donc j'ai juste besoin de faire l'interpolation et
puis afficher FormErrors.FirstName ici,
aussi simple que cela.
Maintenant, vous voyez en faisant
toute la validation d'erreur de formulaire et le code et en faisant toutes les vérifications et ainsi de suite dans le code,
vous avez déjà construit les messages d'erreur que nous devons afficher.
Tout ce que nous faisons est de prendre ce message d'erreur et ensuite de mettre
ceci dans le modèle ici, c'est tout.
Le code de modèle devient plus simplifié dans ce cas particulier,
et aussi en faisant la validation du formulaire en utilisant le code dactylographié,
nous avons simplifié le modèle ici en même temps nous pouvons faire
validation de formulaire plus compliquée dans notre code dactylographié.
Je vais aller de l'avant et faire le même genre de changements aux champs restants ici,
donc pour le champ de nom de famille,
je vais à nouveau remplacer tout cela par FormErrors.LastName.
Maintenant, faites encore la même chose pour le numéro de téléphone.
Maintenant, encore une fois que vous voyez la structure du modèle devient très,
très uniforme dans ce cas.
Donc, c'est aussi une autre façon de simplifier
la structure de votre modèle en continuant au champ email ici.
Je vais faire le même changement dans le champ email aussi.
Donc, je dirais FormErrors.email
et remplacer ceci par formatters.email.
Donc, comme vous pouvez le voir,
votre code de modèle a considérablement simplifié par rapport à auparavant.
Avec cela, toute la validation d'erreur que j'ai besoin
a été ajoutée dans mon modèle et mon modèle est maintenant mis à jour,
alors sauvegardons les modifications.
Deux autres choses que j'ai besoin d'ajouter est l'attribut
appelé email à ce champ particulier appelé email.
Alors, rappelez-vous que nous avons ajouté l'email Validator ici.
Donc, avec le requis,
Je vais ajouter aussi de l'email au champ de saisie ici.
De même, pour le telnum,
nous utilisons le modèle là.
Donc, je vais ajouter dans le modèle donc c'est le champ de saisie pour le telnum.
Donc, dans le champ de saisie, je vais ajouter le motif est égal à et
le motif que je vais ajouter est
entre crochets zéro à neuf,
et ensuite mettre une étoile là.
Donc, ce qui signifie que c'est quelque chose de zéro à neuf répété plusieurs fois.
Ainsi, le numéro de téléphone peut contenir des nombres compris entre zéro et neuf.
N'importe quel nombre de ces chiffres.
Vous pouvez également mettre une minlength et maxlength sur le champ telnum
si pour votre pays particulier le numéro de téléphone a un format fixe,
vous pouvez le faire aussi.
Donc, cela peut facilement être fait.
Mais, dans cet exercice,
je n'ai pas ajouté la restriction minlength et maxlength pour le telnum ici.
Maintenant, que nous avons fait toutes les mises à jour,
nous allons enregistrer les modifications et ensuite aller jeter un oeil au formulaire dans le navigateur.
En allant dans le navigateur maintenant,
faisons défiler jusqu'au formulaire ici.
Tapons le prénom et comme vous le voyez lorsque vous tapez un seul caractère,
alors le message d'erreur est immédiatement affiché,
mais au moment où vous tapez des caractères supplémentaires ce message d'erreur disparaîtra.
De même, pour le nom de famille.
Pour le numéro de téléphone, si vous essayez de taper autre chose que des nombres,
alors les messages d'erreur s'affichent.
Donc, vous pouvez taper,
de la même manière pour l'e-mail, de sorte que vous voyez que le format de l'e-mail non valide sera affiché.
Si vous n'avez pas l'e-mail, il affiche également le message d'erreur.
Mais, dès que vous tapez quelque chose comme ça,
alors ceci est considéré comme un format d'email valide donc il sera accepté.
Donc, c'est l'ensemble des messages d'erreur et la validation de formulaire
fait complètement dans le code comme fait dans cet exercice particulier.
Donc, avec cela, nous terminons cet exercice.
Dans cet exercice, nous avons vu l'utilisation du changement de valeur est observable,
et nous avons également vu comment nous pouvons faire la validation de formulaire dans notre code dactylographié.
Ceci termine cet exercice.
C'est le bon moment pour vous de faire un commit git avec
le message réactif forme la troisième partie.