AngularJS를 이용한 From Validation.
지금까지 프로젝트를 진행하면서, 많은 유효성 검사 함수를 만들어서 썼다.
아무래도, 내가 너무 시대에 뒤떨어져있었던게 아닌가 생각된다.
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
출처: https://jason-moon.tistory.com/101?category=610235 [Programmer]
'JavaScript FrontEnd > Angular' 카테고리의 다른 글
| [Angular] Data Binding (데이터 바인딩) (0) | 2021.04.29 |
|---|---|
| [Angular] 02.튜토리얼 (4~8) (0) | 2021.04.29 |
| [Angular] 01.튜토리얼(1~3) (0) | 2021.04.29 |
| [Angular] 튜토리얼(Introduction, The Application Shell, The Hero Editor) (0) | 2021.04.29 |
| [Angular] 시작하기 (0) | 2021.04.29 |
| HighCharts 모듈 사용하기. (0) | 2021.04.13 |
| AngularJS 양방향 데이터 바인딩 (0) | 2021.04.13 |
| AngularJS와 jQuery의 간단한 비교.. (0) | 2021.04.13 |