지금까지 프로젝트를 진행하면서, 많은 유효성 검사 함수를 만들어서 썼다.
아무래도, 내가 너무 시대에 뒤떨어져있었던게 아닌가 생각된다.
AngularJS를 활용하면 간편하게 유효성 검사를 할 수 있는데, 아래 간단한 예제를 소개한다.
<body ng-controller="ngCtrl">
<form name="from">
<label>
User name:
<input type="text" name="name" ng-model="name" ng-required="true">
</label>
<div role="alert">
<span class="error" ng-show="from.name.$error.required">
Required!
</span>
</div>
</form>
</body>
AngularJS에서는 사용자의 입력에 따른 From Validation을 기본적으로 몇가지 제공한다.
Attribute | Type | Detail |
ngRequired |
boolean |
필수 입력 체크. |
ngMinlength |
number |
최소길이 설정. |
ngMaxlength |
number |
최대길이 설정. |
ngPattern |
string |
패턴설정. 정규표현식 사용. |
AngularJS에서 Form의 Properties에 접근하는 방법은 아래와 같다.
Form 접근 : <form name>.<angular properties>
Input 접근 : <form name>.<input name>.<angular properties>
Angular Properties의 종류.
$pristine (boolean)
- 사용자가 해당 Form이나 Control을 사용하지 않았으면 True를 리턴한다.
$dirty (boolean)
- 사용자가 해당 Form이나 Control을 사용했으면 True를 리턴한다.
$valid (boolean)
- 모든 Form과 Control이 유효하면 True를 리턴한다.
$invalid (boolean)
- 적어도 하나 이상의 Form이나 control이 유효하지 않으면 True를 리턴한다.
$pending (boolean)
- 적어도 하나 이상의 Form이나 control이 $asyncValidator가 진행되지 않았을 경우 True를 리턴한다.
$submitted (boolean)
- 사용자가 Form을 Submit 하였을 경우 True를 리턴한다.
참고 URL : https://docs.angularjs.org/guide/forms
참고 URL2 : https://docs.angularjs.org/api/ng/type/form.FormController
'JavaScript > AngularJS' 카테고리의 다른 글
| HighCharts 모듈 사용하기. (0) | 2015.12.30 |
|---|---|
| AngularJS 양방향 데이터 바인딩 (0) | 2015.12.28 |
| AngularJS와 jQuery의 간단한 비교.. (2) | 2015.12.25 |
