Derniers tutoriels de développement web
 

AngularJS validation de formulaire

❮ Précédent Suivant Chapitre ❯

AngularJS peuvent valider des données d'entrée.

validation de formulaire

AngularJS offre validation de formulaire côté client.

AngularJS surveille l'état des champs de formulaire et d'entrée (entrée, textarea, sélectionnez), et vous permet d'informer l'utilisateur sur l'état actuel.

AngularJS détient également des informations pour savoir si elles ont été touchées, ou modifiées, ou non.

Vous pouvez utiliser la norme HTML5 attributs pour valider la saisie, ou vous pouvez faire vos propres fonctions de validation.

Remarque validation côté client entrée sécurisée ne peut pas seul utilisateur. validation côté serveur est également nécessaire.

Obligatoire

Utilisez l'attribut HTML5 required de préciser que le champ de saisie doit être remplie:

Exemple

Le champ de saisie est nécessaire:

<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>

<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
Essayez - le vous - même »

Email

Utilisez le type HTML5 email pour indiquer que la valeur doit être un e-mail:

Exemple

Le champ d'entrée doit être un e-mail:

<form name="myForm">
<input name="myInput" ng-model="myInput" type="email">
</form>

<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
Essayez - le vous - même »

Formulaire d'État et de l'Etat d'entrée

AngularJS est constamment mise à jour de l'état de la forme et les champs de saisie.

Les champs d'entrée ont les états suivants:

  • $untouched Le champ n'a pas encore été touché
  • $touched Le champ a été touché
  • $pristine Le champ n'a pas encore été modifié
  • $dirty Le champ a été modifié
  • $invalid Le contenu du champ est pas valide
  • $valid Le contenu du champ est valide

Elles sont toutes les propriétés du champ de saisie, et sont soit true ou false .

Les formulaires ont les états suivants:

  • $pristine Aucun champ n'a encore été modifié
  • $dirty Un ou plusieurs ont été modifiés
  • $invalid Le contenu du formulaire est pas valide
  • $valid Le contenu du formulaire est valide
  • $submitted Le formulaire est soumis

Ils sont toutes les propriétés de la forme, et sont soit true ou false .

Vous pouvez utiliser ces états pour afficher des messages significatifs à l'utilisateur. Par exemple, si un champ est nécessaire, et l'utilisateur laisse le champ vide, vous devez donner à l'utilisateur un avertissement:

Exemple

Afficher un message d'erreur si le champ a été touché et est vide:

<input name="myName" ng-model="myName" required>
<span ng-show="myForm.myName.$touched && myForm.myName.$invalid">The name is required.</span>
Essayez - le vous - même »

Classes CSS

AngularJS ajoute des classes CSS à des formes et des champs d'entrée en fonction de leurs états.

Les classes suivantes sont ajoutés ou retirés de, champs d'entrée:

  • ng-untouched Le champ n'a pas encore été touché
  • ng-touched Le champ a été touché
  • ng-pristine Le champ n'a pas encore été modifié
  • ng-dirty Le champ a été modifié
  • ng-valid Le contenu du champ est valide
  • ng-invalid Le contenu du champ est pas valide
  • ng-valid- key Une clé pour chaque validation. Exemple: ng-valid-required , utile quand il y a plus d'une chose qui doit être validée
  • ng-invalid- key Exemple: ng-invalid-required

Les classes suivantes sont ajoutés ou retirés de formes:

  • ng-pristine Aucun champ n'a pas encore été modifiée
  • ng-dirty Un ou plusieurs champs a été modifié
  • ng-valid Le contenu du formulaire est valide
  • ng-invalid Le contenu du formulaire est pas valide
  • ng-valid- key Une clé pour chaque validation. Exemple: ng-valid-required , utile quand il y a plus d'une chose qui doit être validée
  • ng-invalid- key Exemple: ng-invalid-required

Les classes sont supprimées si la valeur qu'ils représentent est false .

Ajouter des styles pour ces classes pour donner à votre demande une interface utilisateur meilleure et plus intuitive.

Exemple

Appliquer des styles, en utilisant la norme CSS:

<style>
input.ng-invalid {
    background-color: pink;
}
input.ng-valid {
    background-color: lightgreen;
}
</style>
Essayez - le vous - même »

Les formulaires peuvent également être de style:

Exemple

Appliquer des styles pour les formes non modifiées (vierges), et pour les formes modifiées:

<style>
form.ng-pristine {
    background-color: lightblue;
}
form.ng-dirty {
    background-color: pink;
}
</style>
Essayez - le vous - même »

Validation personnalisée

Pour créer votre propre fonction de validation est un peu plus compliqué. Vous devez ajouter une nouvelle directive à votre demande, et faire face à la validation dans une fonction avec certains arguments spécifiés.

Exemple

Créer votre propre directive, contenant une fonction de validation personnalisée, et de s'y référer en utilisant my-directive .

Le champ ne sera valide que si la valeur contient le caractère "e":

<form name="myForm">
<input name="myInput" ng-model="myInput" required my-directive>
</form>

<script>
var app = angular.module('myApp', []);
app.directive('myDirective', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attr, mCtrl) {
      function myValidation(value) {
        if (value.indexOf("e") > -1) {
          mCtrl.$setValidity('charE', true);
        } else {
          mCtrl.$setValidity('charE', false);
        }
        return value;
      }
      mCtrl.$parsers.push(myValidation);
    }
  };
});
</script>
Essayez - le vous - même »

Exemple Explained:

En HTML, la nouvelle directive sera désignée en utilisant l'attribut my-directive .

Dans le JavaScript , nous commençons par l' ajout d' une nouvelle directive nommée myDirective .

Rappelez- vous , lorsque vous nommez une directive, vous devez utiliser un nom de cas de chameau, myDirective , mais lors de l' appel, vous devez utiliser - nom séparés, my-directive .

Ensuite, retourner un objet où vous indiquez que nous avons besoin ngModel , qui est le ngModelController.

Faire une fonction de liaison qui prend des arguments, où le quatrième argument, mCtrl , est le ngModelController ,

Spécifiez ensuite une fonction, dans ce cas appelé myValidation , qui prend un argument, cet argument est la valeur de l'élément d'entrée.

Test si la valeur contient la lettre "e", et définir la validité du contrôleur de modèle soit true ou false .

Enfin, mCtrl.$parsers.push(myValidation); Ajoutera la myValidation fonction à un éventail d'autres fonctions, qui sera exécuté à chaque fois que les variations de la valeur d'entrée.

Exemple de validation

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<h2>Validation Example</h2>

<form  ng-app="myApp"  ng-controller="validateCtrl"
name="myForm" novalidate>

<p>Username:<br>
  <input type="text" name="user" ng-model="user" required>
  <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
  <span ng-show="myForm.user.$error.required">Username is required.</span>
  </span>
</p>

<p>Email:<br>
  <input type="email" name="email" ng-model="email" required>
  <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
  <span ng-show="myForm.email.$error.required">Email is required.</span>
  <span ng-show="myForm.email.$error.email">Invalid email address.</span>
  </span>
</p>

<p>
  <input type="submit"
  ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
  myForm.email.$dirty && myForm.email.$invalid">
</p>

</form>

<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
    $scope.user = 'John Doe';
    $scope.email = '[email protected]';
});
</script>

</body>
</html>
Essayez - le vous - même »
Remarque Le formulaire HTML attribut novalidate est utilisé pour désactiver la validation du navigateur par défaut.

Exemple Explained

Le ng-modèle de directive AngularJS lie les éléments d'entrée du modèle.

L'objet du modèle possède deux propriétés: l' utilisateur et email.

En raison de ng-show, les travées avec la couleur: rouge ne sont affichés que lorsque l' utilisateur ou e - mail est $ sale et $ invalide.


❮ Précédent Suivant Chapitre ❯