AngularJS 表单

AngularJS enrichit la saisie de formulaire et la validation. Nous pouvons utiliser l'événement ngclick pour traiter le bouton click et utiliser les indicateurs $dirty et $invalid pour une validation sans couture. L'utilisation de novalidate avec la déclaration de formulaire peut désactiver toute validation spécifique au navigateur. Les contrôles de formulaire utilisent massivement les événements AngularJS. regardons d'abord ces événements.

événements

AngularJS fournit plusieurs événements associés aux contrôles HTML. Par exemple, ng-Les instructions click sont généralement associées aux boutons. AngularJS prend en charge les événements suivants-

ng-click
ng-dbl-click
ng-mousedown
ng-mouseup
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-mouseover
ng-keydown
ng-keyup
ng-keypress
ng-change

ng-click

Utilisez le bouton ng-l'instruction click réinitialise les données du formulaire.

<input name="firstname" type="text" ng-model = "firstName" required>
<input name="lastname" type="text" ng-model = "lastName" required>
<input name="email" type="email" ng-model="email" required>
<button ng-click = "reset()">Reset</button>
<script>
　　　function studentController($scope) {　
　　　　　　$scope.reset　=　function()　{
　　　　　　　　　$scope.firstName = "Mahesh";
　　　　　　　　　$scope.lastName = "Parashar";
　　　　　　　　　$scope.email = "MaheshParashar@w"3codebox.com";
　　　　　　}　　　
　　　　　　
　　　　　　$scope.reset();
　　　}
</script>

Validation des données

Le contenu suivant peut être utilisé pour suivre les erreurs.

$dirty −Indiquez que la valeur a été modifiée.
$invalid −Indiquez que la valeur entrée est invalide.
$error −Déterminez l'erreur précise.

Exemple en ligne

Le présent exemple montrera toutes les instructions mentionnées ci-dessus.

testAngularJS.htm

Exemple

<html>
　　　<head>
　　　　　　<title>Angular JS Forms</title>
　　　　　　<script src="https://cdn.staticfile.org/angular.js/1.3.14/angular.min.js"></script>
　　　　　　
　　　　　　<style>
　　　　　　　　　table, th , td {
　　　　　　　　　　　　border:　1px solid grey;
　　　　　　　　　　　　border-collapse: collapse;
　　　　　　　　　　　　padding:　5px;
　　　　　　　　　}
　　　　　　　　　table tr:nth-child(odd) {
　　　　　　　　　　　　background-color: #f2f2f2;
　　　　　　　　　}
　　　　　　　　　table tr:nth-child(even) {
　　　　　　　　　　　　background-color: #ffffff;
　　　　　　　　　}
　　　　　　</style>
　　　　　　
　　　</head>
　　　<body>
　　　　　　
　　　　　　<h2>AngularJS-Exemple de formulaire </h2>
　　　　　　<div ng-app="mainApp" ng-controller="studentController">
　　　　　　　　　
　　　　　　　　　<form name="studentForm" novalidate>
　　　　　　　　　　　　<table border="0">
　　　　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　　　　<td>Entrer le prénom:</td>
　　　　　　　　　　　　　　　　　　<td><input name = "firstname" type = "text" ng-model = "firstName" required>
　　　　　　　　　　　　　　　　　　　　　<span style = "color:red" ng-show = "studentForm.firstname.$dirty && studentForm.firstname.$invalid">
　　　　　　　　　　　　　　　　　　　　　　　　<span ng-show = "studentForm.firstname.$error.required">Le prénom est obligatoire.</span>
　　　　　　　　　　　　　　　　　　　　　</span>
　　　　　　　　　　　　　　　　　　</td>
　　　　　　　　　　　　　　　</tr>
　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　　　　<td>Entrer le nom de famille:　</td>
　　　　　　　　　　　　　　　　　　<td><input name = "lastname" type = "text" ng-model = "lastName" required>
　　　　　　　　　　　　　　　　　　　　　<span style = "color:red" ng-show = "studentForm.lastname.$dirty && studentForm.lastname.$invalid">
　　　　　　　　　　　　　　　　　　　　　　　　<span ng-show = "studentForm.lastname.$error.required">Le nom de famille est obligatoire.</span>
　　　　　　　　　　　　　　　　　　　　　</span>
　　　　　　　　　　　　　　　　　　</td>
　　　　　　　　　　　　　　　</tr>
　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　　　　<td>Email:　</td><td><input name = "email" type = "email" ng-model = "email" length = ""100" required>
　　　　　　　　　　　　　　　　　　　　　<span style = "color:red" ng-show = "studentForm.email.$dirty && studentForm.email.$invalid">
　　　　　　　　　　　　　　　　　　　　　　　　<span ng-show = "studentForm.email.$error.required">L'e-mail est obligatoire.</span>
　　　　　　　　　　　　　　　　　　　　　　　　<span ng-show = "studentForm.email.$error.email">Adresse e-mail invalide.</span>
　　　　　　　　　　　　　　　　　　　　　</span>
　　　　　　　　　　　　　　　　　　</td>
　　　　　　　　　　　　　　　</tr>
　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　　　　<td>
　　　　　　　　　　　　　　　　　　　　　<button ng-click = "reset()">Reset</button>
　　　　　　　　　　　　　　　　　　</td>
　　　　　　　　　　　　　　　　　　<td>
　　　　　　　　　　　　　　　　　　　　　<button ng-disabled = "studentForm.firstname.$dirty &&
　　　　　　　　　　　　　　　　　　　　　　　　studentForm.firstname.$invalid || studentForm.lastname.$dirty &&
　　　　　　　　　　　　　　　　　　　　　　　　studentForm.lastname.$invalid || studentForm.email.$dirty &&
　　　　　　　　　　　　　　　　　　　　　　　　studentForm.email.$invalid"　ng-click="submit()">Submit</button>
　　　　　　　　　　　　　　　　　　</td>
　　　　　　　　　　　　　　　</tr>
　　　　　　　　　　　　</table>
　　　　　　　　　</form>
　　　　　　</div>
　　　　　　
　　　　　　<script>
　　　　　　　　　var　mainApp　=　angular.module("mainApp",　[]);
　　　　　　　　　
　　　　　　　　　mainApp.controller('studentController',　function($scope)　{
　　　　　　　　　　　　$scope.reset　=　function()　{
　　　　　　　　　　　　　　　$scope.firstName　=　"Sea";
　　　　　　　　　　　　　　　$scope.lastName　=　"Gull";
　　　　　　　　　　　　　　　$scope.email　=　"[email protected]";
　　　　　　　　　　　　}
　　　　　　　　　　　　
　　　　　　　　　　　　$scope.reset();
　　　　　　　　　});
　　　　　　</script>
　　　　　　
　　　</body>
</html>

测试看看‹/›

输出结果

在网络浏览器中打开文件testAngularJS.htm并查看结果。