English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Les formulaires et les contrôles AngularJS peuvent valider les données d'entrée.
Dans les quelques chapitres précédents, vous avez appris sur les formulaires et les contrôles AngularJS.
Les formulaires et les contrôles AngularJS peuvent fournir des fonctionnalités de validation et avertir les utilisateurs des données non valides saisies.
La validation client ne peut pas garantir la sécurité des données saisies par l'utilisateur, donc la validation des données côté serveur est également nécessaire.
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<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>Adresse 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'adresse 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 = 'John Doe';
$scope.email = '[email protected]';
});
</script>
</body>
</html>Voyons tester ‹/›L'attribut HTML de formulaire novalidate est utilisé pour désactiver la validation par défaut du navigateur.
AngularJS ng-model L'instruction est utilisée pour lier des éléments d'entrée au modèle.
L'objet modèle a deux propriétés : user et email.
Nous avons utilisé ng-showInstruction, color:red dans le courriel de $dirty ou $invalid Affiché uniquement lorsque tous sont true.
| Attribut | Description |
|---|---|
| $dirty | Il y a des enregistrements de remplissage de formulaire |
| $valid | Le contenu du champ est légal |
| $invalid | Le contenu du champ est illégal |
| $pristine | Aucun enregistrement de remplissage de formulaire |