Validation de formulaire AngularJS

Page précédente Formulaires AngularJS
Page suivante API AngularJS

AngularJS peut valider les données d'entrée.

Validation de formulaire

AngularJS fournit une validation de formulaire client.

AngularJS surveille l'état des formulaires et des champs d'entrée (input, textarea, select) et permet de notifier l'utilisateur de l'état actuel.

AngularJS contient également des informations sur s'ils ont été touchés ou modifiés.

Vous pouvez utiliser les attributs HTML5 standard pour valider l'entrée ou créer votre propre fonction de validation.

La validation client ne peut pas protéger seule l'entrée de l'utilisateur. La validation serveur est également nécessaire.

required

Utilisation des attributs HTML5 required Il est nécessaire de remplir le champ d'entrée spécifié :

instance

Ce champ d'entrée est obligatoire :

<form name="myForm">  
  <input name="myInput" ng-model="myInput" required>  
</form>  
<p>The valid status of the input is:</p>  
<h1>{{myForm.myInput.$valid}}</h1>

Essayez-le vous-même

email

Utilisation du type HTML5 email La valeur spécifiée doit être un e-mail :

instance

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

<form name="myForm">  
  <input name="myInput" ng-model="myInput" type="email">  
</form>  
<p>The valid status of the input is:</p>  
<h1>{{myForm.myInput.$valid}}</h1>

Essayez-le vous-même

Form status and input status

AngularJS continuously updates the status of forms and input fields.

The input field has the following status:

$untouched This field has not been touched
$touched This field has been touched
$pristine This field has not been modified
$dirty This field has been modified
$invalid Field content is invalid
$valid Field content is valid

They are both properties of the input field, either true or false.

The form has the following status:

$pristine No fields have been modified yet
$dirty One or more fields have been modified
$invalid The form content is invalid
$valid The form content is valid
$subscribed The form has been submitted

They are both properties of the form, which can be true or false.

You can use these states to display meaningful messages to users. For example, if a field is required and the user leaves it blank, a warning should be issued to the user:

instance

If the field has been touched and is empty, display an error message:

<input name="myName" ng-model="myName" required>  
<span ng-show="myForm.myName.$touched && myForm.myName.$invalid">The name is a required field.</span>

Essayez-le vous-même

CSS classes

AngularJS adds CSS classes to forms and input fields based on their status.

The following classes have been added to or removed from the input field:

ng-untouched This field has not been touched
ng-touched This field has been touched
ng-pristine This field has not been modified
ng-dirty This field has been modified
ng-valid Field content is valid
ng-invalid Field content is invalid
ng-valid-key Validate one key at a time. For example:ng-valid-requiredIt is very useful when there are multiple required validations.
ng-invalid-key For example:ng-invalid-required

The following classes have been added to or removed from the form:

ng-pristine No fields have been modified yet
ng-dirty One or more fields have been modified
ng-valid The form content is valid
ng-invalid The form content is invalid
ng-valid-key Validate one key at a time. For example:ng-valid-requiredIt is very useful when there are multiple required validations.
ng-invalid-key For example:ng-invalid-required

If the value represented by the class is falseThen these classes will be deleted.

Please add styles to these classes to provide a better and more intuitive user interface for your application.

instance

Apply standard CSS styles:

<style>
input.ng-invalid {
  background-color: pink;
};
input.ng-valid {
  background-color: lightgreen;
};
</style>

Essayez-le vous-même

You can also set the form style.

instance

Apply styles to both the unmodified (original) form and the modified form:

<style>
form.ng-pristine {
  background-color: lightblue;
};
form.ng-dirty {
  background-color: pink;
};
</style>

Essayez-le vous-même

Validation personnalisée

Créer une fonction de validation personnalisée nécessite quelques astuces ; vous devez ajouter une nouvelle instruction à l'application et utiliser certains paramètres de traitement spécifiés pour gérer la validation à l'intérieur de la fonction.

instance

Créez votre propre instruction, contenant une fonction de validation personnalisée, et utilisez-la my-directive Référez-vous à lui.

Ce champ est valide uniquement 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

Example Explained:

En HTML, la nouvelle instruction sera définie en utilisant l'attribut my-directive pour faire référence.

En JavaScript, nous ajoutons d'abord une nom appelé myDirective nouvelle instruction.

Rappelez-vous, lorsque vous nommez une instruction, vous devez utiliser la casse en majuscules et en minuscules, comme myDirectiveMais lorsque vous l'appellez, vous devez utiliser un nom séparé par des tirets, comme my-directive.

Ensuite, retournez un objet qui spécifie ce que nous devons ngModelc'est-à-dire ngModelController.

Créez une fonction de liaison qui accepte certains paramètres, dont le quatrième paramètre mCtrl est ngModelController.

Ensuite, spécifiez une fonction, dans cet exemple nommée myValidationIl accepte un paramètre, qui est la valeur de l'élément d'entrée.

Testez si cette valeur contient la lettre "e" et définissez la validité du contrôleur de modèle à true ou false.

Enfin,mCtrl.$parsers.push(myValidation); aura myValidation La fonction est ajoutée à l'array d'autres fonctions, qui seront exécutées à chaque modification de la valeur d'entrée.

Exemple de validation

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<h2>Exemple de validation</h2>
<form ng-app="myApp"  ng-controller="validateCtrl"
name="myForm" novalidate>
<p>Nom d'utilisateur :<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">Le nom d'utilisateur est obligatoire.</span>
  </span>
</p>
<p>E-mail :<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">L'e-mail est obligatoire.</span>
  <span ng-show="myForm.email.$error.email">Adresse e-mail non valide.</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 = 'Bill Gates';
  $scope.email = 'bill.gates@gmail.com';
});
</script>
</body>
</html>

Essayez-le vous-même

Attribut de formulaire HTML novalidate Utilisé pour désactiver la validation par défaut du navigateur.

Exemple d'explication :

Instructions AngularJS ng-model Lier l'élément d'entrée au modèle.

L'objet modèle a deux propriétés :user et email.

Pour ng-showque user ou email est $dirty et $invalid Ce n'est que lorsque,

Page précédente Formulaires AngularJS
Page suivante API AngularJS

Horaires des cours

Tutoriel

instance

Manuel de référence

Cours optionnels

Recommandation de cours :

Validation de formulaire AngularJS