English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
AngularJS arricchisce la compilazione e la convalida dei moduli. Possiamo utilizzare l'evento ngclick per gestire il pulsante click e utilizzare i segni $dirty e $invalid per la convalida senza interruzioni. Utilizzare novalidate con la dichiarazione del modulo per disabilitare qualsiasi convalida specifica del browser. I controlli del modulo utilizzano ampiamente gli eventi AngularJS. Vediamo prima questi eventi.
AngularJS offre molteplici eventi associati ai controlli HTML. Ad esempio, l'istruzione ng-click è solitamente associata ai pulsanti. AngularJS supporta i seguenti eventi -
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
Utilizzare l'istruzione ng-click per ripristinare i dati del modulo.
<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 = "[email protected]";
}
$scope.reset();
}
</script>Il seguente contenuto può essere utilizzato per tracciare gli errori.
$dirty − Indica che il valore è stato modificato.
$invalid − Indica che il valore inserito è non valido.
$error − Specifica l'errore esatto.
Il seguente esempio mostrerà tutte le istruzioni menzionate sopra.
<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-表单示例</h2>
<div ng-app="mainApp" ng-controller="studentController">
<form name="studentForm" novalidate>
<table border="0">
<tr>
<td>输入名字:</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">Devi inserire il nome.</span>
</span>
</td>
</tr>
<tr>
<td>Inserisci il cognome: </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">Devi inserire il cognome.</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'email è obbligatoria.</span>
<span ng-show = "studentForm.email.$error.email">Indirizzo email non valido.</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 &&
Submit <button ng-click="submit()">studentForm.email.$invalid</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并查看结果。