Explication détaillée de l'utilisation du formulaire AngularJS

Explication détaillée de l'utilisation du formulaire AngularJS_AngularJS

WBOY

Libérer： 2016-05-16 15:54:39

original

951 Les gens l'ont consulté

AngularJS permet de remplir et de valider des formulaires riches. Nous pouvons utiliser ng-click pour gérer les événements de bouton de clic AngularJS, puis utiliser les indicateurs $dirty et $invalid pour la vérification. Utilisez la déclaration de formulaire novalidate pour désactiver toute validation spécifique au navigateur. Les contrôles de formulaire utilisent de nombreuses activités angulaires. Jetons d'abord un rapide coup d'œil aux événements pertinents.
Événement

AngularJS fournit plusieurs événements pouvant être associés à des contrôles HTML. Par exemple, ng-click est généralement associé à des boutons. Voici les événements pris en charge par AngularJS.

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

ng-clic

Le formulaire réinitialise les données en utilisant la commande consistant à cliquer sur un bouton.

<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@yiibai.com";
 }  
  $scope.reset();
}
</script>

Copier après la connexion

Données de vérification

Vous pouvez utiliser l'erreur de suivi ci-dessous.

$dirty - La valeur spécifiée a été modifiée.
$invalid- Le statut de cette valeur n'est pas valide.
$error- indique l'erreur exacte.

Exemple

L'exemple suivant démontrera toutes les commandes ci-dessus.
testAngularJS.html

<html>
<head>
<title>Angular JS Forms</title>
<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 Sample Application</h2>
<div ng-app="" ng-controller="studentController">
<form name="studentForm" novalidate>
<table border="0">
<tr><td>Enter first name:</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">First Name is required.</span>
  </span>
</td></tr>
<tr><td>Enter last name: </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">Last Name is required.</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">Email is required.</span>
  <span ng-show="studentForm.email.$error.email">Invalid email address.</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>
function studentController($scope) { 
  $scope.reset = function(){
 $scope.firstName = "Mahesh";
 $scope.lastName = "Parashar";
 $scope.email = "MaheshParashar@yiibai.com";
  }  
  $scope.reset();
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>

Copier après la connexion

Sortie

Ouvrez textAngularJS.html dans votre navigateur Web. Voir les résultats ci-dessous.

2015617100230750.png (715×347)