极客教程AngularJS 表单
AngularJS丰富了表单填充和验证。我们可以使用ng-click事件来处理点击按钮，并使用$dirty和$invalid标志以无缝的方式进行验证。使用novalidate在表单声明中禁用任何特定于浏览器的验证。表单控件大量使用AngularJS事件。让我们先来看一下这些事件。
事件
AngularJS提供了与HTML控件相关联的多个事件。例如，ng-click指令通常与按钮关联。AngularJS支持以下事件−
- 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
使用按钮的on-click指令重置表单的数据。
<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@tutorialspoint.com";
}scope.reset();
}
</script>
数据校验
以下内容可用于跟踪错误。
- $dirty − 表示值已更改。
-
$invalid − 表示输入的值无效。
-
$error − 表示具体的错误。
示例
以下示例将展示所有上述指令。
testAngularJS.htm
<html>
<head>
<title>Angular JS Forms</title>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/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 Sample Application</h2>
<div ng-app = "mainApp" 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>
var mainApp = angular.module("mainApp", []);
mainApp.controller('studentController', function(scope) {scope.reset = function() {
scope.firstName = "Mahesh";scope.lastName = "Parashar";
scope.email = "MaheshParashar@tutorialspoint.com";
}scope.reset();
});
</script>
</body>
</html>
输出
在 Web 浏览器中打开文件 testAngularJS.htm 并查看结果。
