Nous venons de terminer l'apprentissage sur les formes guidées par modèle angulaire et aussi,
dans l'exercice, construit notre première forme pilotée par modèle.
Maintenant, lorsque l'utilisateur saisit des informations dans les champs de formulaire,
, nous pouvons souhaiter valider les données que l'utilisateur saisit dans ces champs de données.
Dans les premiers jours du web,
la seule façon de vérifier les données était d'expédier les données
sur le serveur, puis de faire les vérifications côté serveur,
, puis d'obtenir le résultat du côté serveur.
Mais de nos jours, avec de puissants frameworks côté client comme Angular,
une grande partie de la validation des données peut facilement être effectuée côté client
lui-même et nous pouvons facilement attraper beaucoup d'erreurs côté client,
et ensuite fournir une indication à l'utilisateur sur les erreurs.
Maintenant, c'est là que nous allons regarder le support angulaire pour la validation de formulaire
et ensuite comment nous pouvons effectuer la validation de formulaire,
et ensuite afficher des messages d'erreur à l'utilisateur dans les vues.
HTML5 est déjà livré avec un support intégré pour la validation de formulaire.
Mais quand nous utilisons Angular pour notre application,
nous devons d'abord désactiver la validation du formulaire HTML5,
afin que la responsabilité de faire la validation du formulaire
soit transférée à l'application Angular.
Donc, pour le faire pour le formulaire,
comme nous l'avons vu dans l'exercice plus tôt,
nous incluons l'attribut novalidate à la balise form,
de sorte que cela garantit que l'angulaire
assume la responsabilité de faire la validation du formulaire.
Comment Angular nous aide-t-il à faire la validation du formulaire ?
C'est ce que nous allons examiner plus en détail ensuite.
Chaque fois que vous avez besoin de faire la validation de formulaire dans Angular,
surtout lorsque vous avez besoin de faire référence aux champs de formulaire dans votre modèle,
alors vous avez besoin de l'aide des variables de référence de modèle angulaire.
Comment spécifier une variable de référence de modèle ?
La variable de référence de modèle peut être spécifiée pour
n'importe quel élément en associant une variable de modèle comme celle-ci.
Par exemple, dans ce cas pour le formulaire,
, nous spécifions le formulaire de connexion égal à ngForm.
De même, pour un champ de saisie par exemple,
vous direz barre oblique,
ou plutôt #username est égal à ngModel.
Dans ce cas, le formulaire de connexion et le nom d'utilisateur sont toutes des variables de référence de modèle.
Ces variables de référence de modèle peuvent ensuite être utilisées dans
notre modèle angulaire pour faire référence à ces champs.
Donc, dans le modèle lui-même,
vous pouvez vérifier les états de contrôle pour
ces champs, y compris des choses comme si le champ est valide,
s'il est sale,
ou s'il a quelques erreurs.
Nous allons tirer parti de ce support fourni par Angular afin de faire la validation du formulaire.
Comme je l'ai mentionné, nous allons tirer parti de
les variables de référence du modèle pour recueillir l'état du contrôle pour vérifier les informations.
Ainsi, par exemple, vous pouvez dire nomutilisateur.pristine dans votre modèle.
Donc, cela se réfère à la vérification de l'état,
si le contrôle particulier est dans l'état intact,
ce qui signifie qu'il n'a pas été touché et modifié par l'utilisateur jusqu'à présent.
Le sale est opposé de vierge,
ce qui signifie que lorsqu'un champ est sale,
alors cela signifie que le champ a été modifié par l'utilisateur dans le passé.
De même, l'état de contrôle valide et non valide
nous permet de vérifier si les informations contenues dans ce champ sont valides ou non valides,
selon la spécification de votre chèque
pour la validité ou l'état non valide de ce champ particulier.
Ainsi, par exemple, vous pouvez vérifier si vous avez déclaré un champ comme requis,
, ce qui signifie que vous attendiez à ce que l'utilisateur
saisit au moins quelques informations dans le champ.
L'absence d'informations dans le champ de votre formulaire signifie que le champ n'est pas valide.
De même, vous pouvez spécifier la longueur continentale ou la longueur maximale d'une valeur de champ,
afin que vous puissiez facilement vérifier si le nombre de caractères
dans un champ correspond à la longueur principale,
ou inférieur à la longueur maximale, etc.
Dans l'exercice qui suit,
, nous appliquerons ces différentes approches de validation de formulaire pour
notre formulaire basé sur un modèle que nous avons conçu dans l'exercice précédent.
Par exemple, dans votre formulaire,
, vous pouvez désactiver le bouton d'envoi en vérifiant à
si ce formulaire est dans l'état valide ou non.
Donc, dans ce cas, vous associerez le
désactivé et le définissez égal au formulaire de connexion .form.invalid,
signifie que lorsque le formulaire n'est pas valide,
ce bouton sera désactivé dans ce cas.
Ainsi, l'utilisateur ne sera pas autorisé à soumettre les informations via ce formulaire particulier.
Donc, c'est une façon de s'assurer que
entrées incorrectes ne seront pas soumises par l'utilisateur via le formulaire.
De même, pour des champs spécifiques,
, vous pouvez vérifier si le champ a été rempli ou non.
Donc, si vous spécifiez qu'un champ particulier est requis
en spécifiant l'attribut requis pour le champ d'entrée,
alors vous pouvez vérifier s'il y a une erreur de
le type requis soulevé pour l'élément de champ particulier.
Ainsi, dans votre code par exemple,
vous pouvez même spécifier pour informer l'utilisateur de
le fait qu'un champ particulier est incorrect.
Vous utilisez l'erreur mat-pour le signifier.
Donc, la balise mat-error, qui vient de,
encore, le support de forme matérielle angulaire comme vous le voyez ici,
si le nGif s'avère être vrai,
alors ce message sera affiché ci-dessous dans le champ de saisie là,
et similaire au champ de saisie,
sera marqué comme rouge à l'écran.
Donc, c'est quelque chose que vous allez vérifier et
assurer et aussi livrer des messages d'erreur à l'utilisateur.
Dans l'exercice qui suit,
nous appliquerons cette approche pour vérifier le nom d'utilisateur et le mot de passe.
Nous allons spécifier que ces champs sont obligatoires et si l'utilisateur ne
pas entrer d'informations dans ces champs après que le champ a été touché,
alors nous veillerons à ce que le message d'erreur approprié soit affiché à l'utilisateur.
Donc, avec cette compréhension rapide de la validation de formulaire dans Angular,
passons à l'exercice,
où nous allons vérifier comment nous pouvons faire simple validation de formulaire pour
notre formulaire de connexion et ensuite être en mesure d'afficher des messages d'erreur.
Nous reviendrons à la validation de formulaire dans l'un des exercices ultérieurs,
après avoir appris plus sur le support réactif dans Angular.