AngularJS 폼 사용법에 대한 자세한 설명_AngularJS
- WBOY원래의
- 2016-05-16 15:54:39940검색
AngularJS는 풍부한 양식 채우기 및 유효성 검사를 제공합니다. ng-click을 사용하여 AngularJS 클릭 버튼 이벤트를 처리한 다음 확인을 위해 $dirty 및 $invalid 플래그를 사용할 수 있습니다. 브라우저별 유효성 검사를 비활성화하려면 novalidate 양식 선언을 사용하세요. 양식 컨트롤은 많은 각도 활동을 사용합니다. 먼저 관련 이벤트를 간단히 살펴보겠습니다.
이벤트
AngularJS는 HTML 컨트롤과 연결할 수 있는 여러 이벤트를 제공합니다. 예를 들어 ng-click은 일반적으로 버튼과 연결됩니다. 다음은 AngularJS에서 지원하는 이벤트입니다.
- ng-클릭
- ng-dbl-클릭
- ng-mousedown
- ng-mouseup
- ng-mouseenter
- ng-mouseleave
- ng-mousemove
- 마우스오버
- ng-keydown
- ng-keyup
- ng 키 누르기
- 변경
클릭
버튼을 클릭하는 명령을 사용하여 데이터를 재설정하는 양식입니다.
<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>
검증자료
아래의 추적오차를 이용하시면 됩니다.
- $dirty - 지정된 값이 변경되었습니다.
- $invalid- 이 값의 상태가 유효하지 않습니다.
- $error-는 정확한 오류를 나타냅니다.
예
다음 예에서는 위의 모든 명령을 보여줍니다.
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>
출력
웹 브라우저에서 textAngularJS.html을 엽니다. 아래 결과를 참조하세요.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.