AngularJS에서 angular.copy() 함수를 사용하여 폼의 reset 기능을 구현해 본다. AngularJS를 사용하기 위해서 아래와 같이 angularJS CDN을 script 태그에 추가한다.
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
form 태그에 ng-app 속성을 만들고 "myApp"으로 정의하고 ng-controller 속성에는 "myCtrl"이라고 정의한다. form 태그에 novalidate 속성을 정의하면 브라우저의 유효성 검사를 하지 않는다.
<form ng-app="myApp" ng-controller="'myCtrl'" name="myForm" novalidate>
폼 입력항목에 required 속성을 정의한다.
<input type="text" name="user" ng-model="user" required>
<input type="email" name="email" ng-model="email" required>
"name" 입력항목에 유효성검사 오류시 표시되는 문구다. $dirty 는 폼에서 사용자가 값을 수정한 적이 있는지를 확인한다. $invalid 는 폼에서 입력항목의 값에 오류가 있는지를 확인한다. 참고로 $valid는 항목의 값이 정상인지를 확인한다. $pristine $pristine는 사용자가 값을 수정한 적이 없는지를 확인한다. ($dirty의 반대)
<span style="color: red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Required name</span>
</span>
"email" 입력항목에 유효성검사 오류시 표시되는 문구다.
<span style="color: red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Required email</span>
<span ng-show="myForm.email.$error.email">Wrong email</span>
</span>
버튼 ng-disabled 속성에 user 항목과 email 항목에 대한 검사를 두어 조건에 맞는 경우에 submit 기능이 수행된다.
<input type="submit" ng-disabled="myForm.user.$dirty && myForm.user.$invalid || myForm.email.$dirty && myForm.email.$invalid">
예제의 전체코드이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AngularJS</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.user = 'Joo HanGil';
$scope.email = 'agapeun@naver.com';
});
</script>
</head>
<body>
<h2>Validation</h2>
<form ng-app="myApp" ng-controller="myCtrl" name="myForm" novalidate>
<p>
Name : <input type="text" name="user" ng-model="user" required>
<span style="color: red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Required name</span>
</span>
</p>
<p>
Email : <input type="email" name="email" ng-model="email" required>
<span style="color: red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Required email</span>
<span ng-show="myForm.email.$error.email">Wrong email</span>
</span>
</p>
<p>
<input type="submit" ng-disabled="myForm.user.$dirty && myForm.user.$invalid || myForm.email.$dirty && myForm.email.$invalid">
</p>
</form>
<hr>
</body>
</html>
아래와 같이 화면에 표시된다. 첫 화면에서는 컨트롤러에서 $scope에 할당한 값이 바로 표시되었다.
입력항목의 값을 비우면 우측에 빨간색으로 경고문구가 표시된다.
Email 입력항목에 "abc@"라고 입력하면 틀린 이메일이라고 표시된다.
'■ Front-End ■ > AngularJs' 카테고리의 다른 글
| [AngularJS] 데이터를 SelectBox에 표시한 뒤 선택한 항목을 표시 (0) | 2023.02.22 |
|---|---|
| [AngularJS] 헤더를 클릭하여 테이블에 출력한 데이터를 정렬 (0) | 2023.02.22 |
| [AngularJS] 폼에서 angular.copy() 함수를 사용하여 reset 기능구현 (0) | 2023.02.22 |
| [AngularJS] ng-show, ng-hide 속성으로 화면요소를 보이기/감추기 (0) | 2023.02.22 |
| [AngularJS] ng-disabled 속성으로 버튼을 활성화/비활성화 (0) | 2023.02.22 |
댓글