Validation des e-mails en Angular

1. Validation des entrées dans Angular
2. Façons de valider les adresses e-mail dans Angular
3. Validation AngularJS (e-mail) avec expressions régulières et ng-pattern:

AngularJS fournit une validation facile des données d’entrée côté client. De nombreux champs de saisie peuvent être présents sur votre formulaire, ce qui facilitera la collecte de données auprès de vos utilisateurs. Cependant, avant de faire quoi que ce soit avec les données, vous devez valider les valeurs dans les champs. Dans cet article, nous verrons comment valider les e-mails dans AngularJS.

Validation des entrées dans Angular

Les données d’un contrôle d’entrée sont validées à l’aide d’une validation. Si les informations ne passent pas la validation, l’utilisateur recevra un message d’erreur. Champ requis, longueur minimale, longueur maximale, modèle et de nombreux autres types de validation existent dans AngularJS.

Syntaxe de la validation des e-mails dans AngularJS :

<form name="Form">

  Code: <input type="text" name="pincode" ng-model="txtpin" ng-pattern="/^[0-9]{1,5}$/" />
  
  <span ng-show="personForm.pincode.$error.pattern"> Only numbers allowed </span>
  
  </form>

Façons de valider les adresses e-mail dans Angular

Angular propose plusieurs méthodes pour valider les e-mails, dont certaines sont répertoriées ci-dessous :

Validation intégrée : Angular a spécifiquement installé des validateurs d’e-mail que vous pouvez utiliser pour vérifier les adresses e-mail fournies par l’utilisateur.

Validation de modèle : vous pouvez spécifier un modèle de validation d’e-mail Angular d’expression régulière (regex) qui doit correspondre à la valeur fournie par l’utilisateur avant que la validation ne se produise.

Exemple de validation par e-mail :

<script src="https://code.angularjs.org/1.2.1/angular.min.js"></script>
<div class="container" ng-app="myApp">
<div class="Sample">
    <div class="form-area" ng-controller="formCtrl">  
        <form role="form" name="inquiryForm" novalidate>
        <br style="clear:both">
                    <h3 style="margin-bottom: 25px; text-align: center;">Example</h3>

					<div class="form-group">
						<input name="email" ng-model="email" id="eml" type="text" ng-pattern="eml_add" ng-required="true" autocomplete="off" placeholder="Email" class="form-control" >            
					</div>

            
        <button type="button" id="submit" name="submit" class="btn btn-primary pull-right" ng-disabled="inquiryForm.$invalid">Submit Form</button>
        </form>
    </div>
</div>
</div>

Validation AngularJS (e-mail) avec expressions régulières et ng-pattern:

Dans AngularJS, vous pouvez utiliser des expressions régulières (RegEx) pour former des validations. Vous devrez utiliser la directive ng-pattern pour travailler avec les expressions. Qu’est-ce que ng-pattern ? Discutons-en.

Directive ng-pattern dans AngularJS

Le modèle ng dans angularjs est utilisé pour valider les contrôles de texte d’entrée à l’aide d’expressions régulières. Si le texte saisi est validé selon la condition, la commande ng-pattern renvoie true ; sinon, il renvoie une erreur. Pour en savoir plus sur ng-pattern, cliquez ici.

Avant de discuter en détail, vous devriez avoir l’idée de la directive suivante :

• ng-minlength : Fournit la longueur la plus courte possible.
• ng-maxlength : Fournit la longueur la plus étendue possible.
• ng-model Attribue des attributs de validation au champ, tels que $error, $valid, etc.
• ng-required Ceci est utilisé pour fournir le champ requis.
• ng-show Cette commande affiche un message d’erreur basé sur un paramètre.

Pour commencer, vous devez ajouter ng-messages comme dépendance de module car cela peut être nécessaire.

<form name="form">
            
  <input type="email" name="emailID" ng-model="email"
      placeholder="Enter an Email ID"
      ng-required="true" 
      ng-pattern=" ^[a-z]+[a-z0-9._-]+@[a-z]+\.[a-z.]{2,5}$"/>

      <div *ngIf="firstEmail.errors || firstEmail.touched">
        <small class="text-danger" *ngIf="firstEmail.errors.required">Primary email is required</small>
    
      </div>
  <input type="submit" ng-disabled="form.$invalid || !email" />

</form>

ng-required="true" est la première chose à remarquer. Cela nécessite de remplir le formulaire de saisie. Vient ensuite le ng-pattern. La directive ng-pattern contient des expressions ou des modèles qu’AngularJS vérifiera pour valider un identifiant de messagerie (vous pouvez ajouter ou supprimer des valeurs).

Si l’utilisateur saisit une adresse e-mail qui ne respecte pas le format XYZ, nous recevrons une erreur.

La directive ng-pattern contient des expressions ou des modèles qu’AngularJS vérifiera pour valider un identifiant de messagerie (vous pouvez ajouter ou supprimer des valeurs).

Enfin, fournissons aux consommateurs des notifications d’erreur en temps réel pour les aider à résoudre tout problème lié aux adresses e-mail fournies.

Ajoutons l’élément div, qui aidera à afficher conditionnellement les avertissements d’erreur aux utilisateurs. Si le champ email contient des problèmes, nous utiliserons automatiquement la directive *ngIf pour afficher cet élément.

Générons des messages d’erreur séparés pour chaque règle que nous avons définie dans la première étape ci-dessus dans la balise div. Utilisons l’objet d’erreurs du formulaire et la directive *ngIf pour rendre les messages dynamiquement. Nous verrons d’abord si l’objet errors existe avant d’aller à la propriété needed ou pattern.