AngularJS
Validation de formulaire

Validation de formulaire de base

L'un des atouts d'Angular est la validation du formulaire côté client.

Traiter avec les entrées de formulaire traditionnelles et devoir utiliser un traitement interrogatif de style jQuery peut être long et complexe. Angular vous permet de produire des formulaires interactifs professionnels relativement facilement.

La directive ng-model fournit une liaison bidirectionnelle avec des champs d'entrée et généralement l'attribut novalidate est également placé sur l'élément de formulaire pour empêcher le navigateur d'effectuer une validation native.

Ainsi, une forme simple ressemblerait à:

<form name="form" novalidate>
  <label name="email"> Your email </label>
  <input type="email" name="email" ng-model="email" />
</form>

Pour que les entrées angulaires soient valides, utilisez exactement la même syntaxe qu'un élément d' entrée standard, à l'exception de l'ajout de l'attribut ng-model pour spécifier la variable à associer à l'étendue. Le courrier électronique est montré dans l'exemple précédent. Pour valider un nombre, la syntaxe serait:

<input type="number" name="postalcode" ng-model="zipcode" />

Les dernières étapes de la validation de base du formulaire sont la connexion à une fonction d'envoi de formulaire sur le contrôleur à l'aide de ng-submit , plutôt que d'autoriser la soumission du formulaire par défaut. Ce n'est pas obligatoire, mais il est généralement utilisé, car les variables d'entrée sont déjà disponibles sur la portée et sont donc disponibles pour votre fonction d'envoi. Il est également bon de donner un nom au formulaire. Ces modifications entraîneraient la syntaxe suivante:

<form name="signup_form" ng-submit="submitFunc()" novalidate>
  <label name="email"> Your email </label>
  <input type="email" name="email" ng-model="email" />
  <button type="submit">Signup</button>
</form>

Ce code ci-dessus est fonctionnel mais il existe d'autres fonctionnalités fournies par Angular.

L'étape suivante consiste à comprendre que Angular associe les attributs de classe à l'aide de ng-pristine , ng-dirty , ng-valid et ng-invalid pour le traitement de formulaire. L'utilisation de ces classes dans votre css vous permettra de définir les champs de saisie valides / non valides / vierges / sales et de modifier ainsi la présentation lorsque l'utilisateur entre des données dans le formulaire.

États de formulaire et d'entrée

Les formes angulaires et les entrées ont différents états utiles lors de la validation du contenu

États d'entrée

Tous les états ci-dessus sont des propriétés booléennes et peuvent être vrais ou faux.

Avec ceux-ci, il est très facile d'afficher des messages à un utilisateur.

<form name="myForm" novalidate>
    <input name="myName" ng-model="myName" required>
    <span ng-show="myForm.myName.$touched && myForm.myName.$invalid">This name is invalid</span>
</form>

Ici, nous utilisons la directive ng-show pour afficher un message à un utilisateur qui a modifié un formulaire mais qui est invalide.

Classes CSS

Angular fournit également des classes CSS pour les formulaires et les entrées en fonction de leur état

Vous pouvez utiliser ces classes pour ajouter des styles à vos formulaires

input.ng-invalid {
  background-color: crimson;
}
input.ng-valid {
  background-color: green;
}

ngMessages

ngMessages est utilisé pour améliorer le style d'affichage des messages de validation dans la vue.

Approche traditionnelle

Avant ngMessages , nous ngMessages normalement les messages de validation en utilisant des directives prédéfinies angulaires ng-class . Cette approche était un déchet et une tâche repetitive .

Maintenant, en utilisant ngMessages nous pouvons créer nos propres messages personnalisés.

Exemple

Html:

<form name="ngMessagesDemo">
  <input name="firstname" type="text" ng-model="firstname" required>
  <div ng-messages="ngMessagesDemo.firstname.$error">
    <div ng-message="required">Firstname is required.</div>
  </div>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular-messages.min.js"></script>

JS:

var app = angular.module('app', ['ngMessages']);

app.controller('mainCtrl', function ($scope) { 
    $scope.firstname = "Rohit";
});

Validation de formulaire personnalisé

Dans certains cas, la validation de base ne suffit pas. Prise en charge angulaire de la validation personnalisée ajoutant des fonctions de validation à l'objet $validators sur le ngModelController :

angular.module('app', [])
  .directive('myValidator', function() {
    return {
      // element must have ng-model attribute
      // or $validators does not work
      require: 'ngModel',
      link: function(scope, elm, attrs, ctrl) {
        ctrl.$validators.myValidator = function(modelValue, viewValue) {
            // validate viewValue with your custom logic
            var valid = (viewValue && viewValue.length > 0) || false;
            return valid; 
        };
      } 
    };

Le validateur est défini comme une directive nécessitant ngModel . Par conséquent, pour appliquer le validateur, ajoutez simplement la directive personnalisée au contrôle de formulaire en entrée.

<form name="form">
  <input type="text" 
         ng-model="model" 
         name="model" 
         my-validator>
  <pre ng-bind="'my-validator returned: ' + form.model.$valid"></pre>
</form> 

Et my-validator ne doit pas nécessairement être appliqué au contrôle de formulaire natif. Il peut s'agir de n'importe quel élément, tant que ng-model dans ses attributs. Ceci est utile lorsque vous avez un composant d'interface utilisateur personnalisé.

Formulaires imbriqués

Parfois, il est souhaitable d'imbriquer des formulaires dans le but de regrouper logiquement les contrôles et les entrées sur la page. Toutefois, les formulaires HTML5 ne doivent pas être imbriqués. Fournitures angulaires ng-form place.

<form name="myForm" noValidate>
  <!-- nested form can be referenced via 'myForm.myNestedForm' -->
  <ng-form name="myNestedForm" noValidate>
    <input name="myInput1" ng-minlength="1" ng-model="input1" required />
    <input name="myInput2" ng-minlength="1" ng-model="input2" required />
  </ng-form>

  <!-- show errors for the nested subform here -->
  <div ng-messages="myForm.myNestedForm.$error">
    <!-- note that this will show if either input does not meet the minimum -->
    <div ng-message="minlength">Length is not at least 1</div>
  </div>
</form>

<!-- status of the form -->
<p>Has any field on my form been edited? {{myForm.$dirty}}</p>
<p>Is my nested form valid? {{myForm.myNestedForm.$valid}}</p>
<p>Is myInput1 valid? {{myForm.myNestedForm.myInput1.$valid}}</p>

Chaque partie de la forme contribue à l'état général de la forme. Par conséquent, si l'une des entrées myInput1 a été modifiée et est $dirty , sa forme contenant sera également $dirty . Cela cascade à chaque formulaire contenant, donc myNestedForm et myForm seront $dirty .

Validateurs asynchrones

Les validateurs asynchrones vous permettent de valider les informations de formulaire par rapport à votre backend (en utilisant $ http).

Ces types de validateurs sont nécessaires lorsque vous devez accéder aux informations stockées sur le serveur que vous ne pouvez pas avoir sur votre client pour diverses raisons, telles que le tableau des utilisateurs et d'autres informations de base de données.

Pour utiliser des validateurs asynchrones, vous accédez au ng-model de votre input et définissez des fonctions de rappel pour la propriété $asyncValidators .

Exemple:

L'exemple suivant vérifie si un nom fourni existe déjà, le serveur retourne un statut qui rejette la promesse si le nom existe déjà ou s'il n'a pas été fourni. Si le nom n'existe pas, il renverra une promesse résolue.

ngModel.$asyncValidators.usernameValidate = function (name) {               
     if (name) {
          return AuthenticationService.checkIfNameExists(name); // returns a promise
     } else {
          return $q.reject("This username is already taken!"); // rejected promise
     }
};

Maintenant, chaque fois que le ng-model de l'entrée est modifié, cette fonction s'exécute et renvoie une promesse avec le résultat.