Comment implémenter la validation de formulaire dans Angular JS?

Cet article vous fournira une connaissance détaillée et complète de la mise en œuvre de la validation de formulaire dans Angular JS avec des exemples

La validation est une méthode pour authentifier l'utilisateur. Il est utilisé dans toutes les technologies Web comme et . Mais aujourd'hui, nous nous concentrerons sur la validation dans Angular JS dans l'ordre suivant:



Qu'est-ce que la validation de formulaire?

La validation de formulaire est une technique par laquelle nous pouvons valider le formulaire HTML. Prenons un exemple simple pour supposer qu'un utilisateur a un formulaire HTML et que le formulaire HTML a différents champs, ces champs sont validés par le validateur de formulaire lorsque nous voulons valider le formulaire il nous suffit de vérifier la valeur du champ particulier avec l'expression du validateur .



validation-in-angular-jsSi l'expression régulière et la valeur du champ sont identiques, nous pouvons dire que notre formulaire est validé. Dans le formulaire HTML, il existe différents types de validations comme l'email, obligatoire, min, max, mot de passe, etc.

Validation de formulaire dans Angular JS

Voyons comment nous pouvons valider un formulaire en JS angulaire. Angular JS fournit différents types de propriétés de validation de formulaire que nous pouvons utiliser pour valider le formulaire ou obtenir les données du formulaire.



  • $ valide : Cette propriété indique si le champ est valide ou non en appliquant la règle appropriée à ce sujet.

  • $ invalide : Comme son nom l'indique invalide, cette mosaïque météo le champ est invalide ou n'est pas basé sur une règle appropriée à ce sujet.

  • $ vierge : Il retournera vrai dans le champ de saisie du formulaire n'est pas utilisé.



  • $ sale : Il retournera vrai dans le champ de saisie du formulaire utilisé.

  • $ touché : Booléen Vrai si l'entrée est floue.

Pour accéder au formulaire: .

Pour accéder à une entrée: ..

Maintenant, expliquons la validation de formulaire dans angular JS avec un exemple, donc tout d'abord nous créons deux fichiers, l'un est app.js et l'autre est index.html. Notre fichier index.htm contient un formulaire HTML simple qui a la validation angulaire et notre fichier app.js contient le code backend pour gérer la validation du formulaire sur la page index.html.

Laindex.htmlformulaire de contenu de page avecnovalidatepropriété et ce que cela signifie exactement?

La propriété novalidate dans la balise form indique au HTML que nous pouvons utiliser notre validation de formulaire personnalisée. Si nous ne donnons pas la propriété novalidate, le formulaire HTML est validé en utilisant les propriétés de validation de formulaire par défaut HTML5.

Étapes de la validation de formulaire

Dans notre formulaire, nous avons créé 6 champs dans notre formulaire: prénom, nom, email, téléphone, mot de passe et message.

  1. Tout d'abord, nous ajoutons le validateur de champ requis, ce validateur indique aux utilisateurs qu'un champ spécifique est requis.

  2. Vient ensuite le champ e-mail si un utilisateur ne donne aucun e-mail valide, notre validateur d'e-mail génère une erreur de validation d'e-mail.

  3. Nous définissons la longueur minimale et la longueur maximale dans notre validation de mot de passe, la longueur minimale est de 5 et la longueur maximale est de 8 afin que l'utilisateur puisse donner un mot de passe valide entre 5 et 8 caractères.

  4. Enfin, nous définissons le téléphone et les champs de message requis et, plus précisément, appliquons la validation du numéro sur le téléphone déposé.

Code pour la validation de formulaire dans Angular JS

index.html

Exemple de portée angulaire Prénom 

Ce fichier est obligatoire

Nom de famille

Ce fichier est obligatoire

Email

Ce fichier est obligatoire

Pas un email valide

Téléphone

Ce fichier est obligatoire

Ce n'est pas un téléphone valide

Mot de passe

Ce fichier est obligatoire

Mot de passe de 5 à 8 caractères

Message

Ce fichier est obligatoire

Soumettre

app.js

var app = angular.module ('ngValidApp', []) app.controller ('ngValidController', function ($ scope) {})

Parlons d'une directive de validation utilisée sous la forme:

comment démarrer aws cli
  • ng-requis : Pour fournir le champ requis
  • ng-show : Pour afficher le message d'erreur en fonction de la condition (vérifiez les propriétés de validation)
  • de minlength : Pour fournir une longueur minimale
  • ng-maxlength : Pour fournir la longueur maximale
  • de-modèle : Pour correspondre à un modèle spécifique
  • ng-modèle : Lie le champ avec des propriétés de validation telles que $ error, $ valid, etc.

Avec cela, nous arrivons à la fin de cet article Validation in Angular JS. J'espère que vous avez compris les différentes choses à prendre en compte pour la validation de formulaire dans Angular JS.

Si vous souhaitez en savoir plus sur le framework Angular, consultez notre qui s'accompagne d'une formation en direct animée par un instructeur et d'une expérience de projet réelle. Cette formation vous aidera à comprendre Angular en profondeur et vous aidera à maîtriser le sujet.

Vous avez une question pour nous? Veuillez le mentionner dans la section commentaires de cet article et nous vous recontacterons.