English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
AngularJS는 양식 작성 및 검증을 풍부시웠습니다. ngclick 이벤트를 사용하여 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指令重置表单数据。
<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>以下内容可用于跟踪错误。
$dirty −说明值已更改。
$invalid −指出输入的值无效。
$error −说明确切的错误。
以下示例将展示所有上述指令。
<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">이름을 입력해야 합니다.</span>
</span>
</td>
</tr>
<tr>
<td>성 입력: </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">성이 필수입니다.</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">이메일은 필수입니다.</span>
<span ng-show = "studentForm.email.$error.email">잘못된 이메일 주소.</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 = "Seagull@w"3codebox.com";
}
$scope.reset();
});
</script>
</body>
</html>테스트를 보세요‹/›출력 결과
네트워크 브라우저에서 파일을 엽니다.testAngularJS.htm결과를 확인하세요。