08. 폼과 유효성 검사를 위한 템플릿(폼/입력 지시자)

- 폼 양식을 서버로 제출하기 전에 사용자가 입력한 값을 검증할 때가 종종 있다. "꼭 입력해야 할 값을 빼먹지 않았는지", "우편번호 형식에 맞는지, " 날짜 형식이 yyyy/mm/dd가 맞는지" 와 같은 경우다. 이렇게 사용자가 입력한 값이 유효한 값으로 채워졌는지 검사하는 것을 폼 양식 유효성 검증(Form Validation)이라 한다.

-AngularJS는 유효성 검증을 손쉽게 할 수 있게 폼 양식 유효성 검증과 관련된 지시자를 제공한다.

1. 텍스트 타입 사용법

<input type="text" ng-model="문자열" name="문자열" ng-minlength="숫자" ng-maxlength="숫자" ng-pattern="문자열" ng-change="문자열">

 1) ng-model : 바인딩 대상이 되는 모델명

 2) name : 폼에서 사용하는 이름

 3) ng-required : 필수 입력 여부

 4) ng-minlength : 입력박스에 입력되는 값의 최소 글자 수

 5) ng-maxlength : 입력박스에 입력되는 값의 최대 글자 수

 6) ng-pattern : 입력된 값과 비교될 정규표현식이며 /정규표현식/과 같은 값이 요구된다.

 7) ng-change : 사용자의 입력이 발생할 때 실행될 표현식

2. FormContoller

 - AngularJS는 표준 HTML 태그 또한 AngularJS 지시자로 만들 수 있다. 즉, <form>태그도 지시자로 간주하고 확장할 수 있다.

그래서 AngularJS는 폼의 상태를 관리하기 위해서 FormController를 만들었다.

AngularJS 기반의 웹 어플리케이션에서 각 <form>은 FormController의 인스턴스이고 <form>의 name 속성에 준 값을 이용해 $scope에서 접근할 수 있다.

<form name="sampleForm> ...</form>

그러면 폼에 sampleForm이라는 이름이 주어졌기 때문에 $scope.sampleForm으로 접근할 수 있다. <form>은 FormController의 인스턴스이므로 객체이다.

◈ FormController의 속성과 메서드 

구분	속성/메서드 명	내용
속성	$pristine	사용자의 입력이 없었으면 true다
	$dirty	사용자의 입력이 있었으면 true 다
	$valid	<form>에 있는 컨트롤 요소(input)가 모두 유효성 검증을 통과하면 true다
	$invalid	<form>에 있는 컨트롤 요소(input)가 모두 유효성 검증을 통과하면 false다
	$error	유효성 검증의 이름(required, email, minlength...) 을 키로 하고 각 컨트롤 요소의 name을 값으로 가진 객체다
메서드	$addControl()	컨트롤 요소를 추가한다.
	$removeControl()	컨트롤 요소를 제거한다.
	$setDirty()	$dirty 값을 바꾼다. 즉, 강제로 폼의 상태를 변경한다.
	$setValidity()	<form> 요소의 유효성 상태를 바꾼다.
	$setPristine()	<form> 요소의 $pristine을 false로 변경한다.

3. NgModelController

 - FormController가 <form> 요소의 유효성 상태나 사용자의 입력 상태를 관리한다면 <form>요소에 있는 컨트롤 요소 즉, <input>, <select>, <textarea>요소 개개의 유효성 상태나

사용자 입력 상태는 NgModelController가 관리한다.

 - FormController와 마찬가지로 컨트롤 요소는 모두 이 NgModelController의 인스턴스로 제어가 된다.

 - 또한 컨트롤 요소의 name 속성의 값을 이용해 해당 인스턴스에 접근할 수 있다.

◈ NgModelController의 속성과 메서드 

구분	속성/메서드 명	내용
속성	$viewValue	화면에서 보이는 값이다.
	$modelValue	컨트롤 요소가 바인딩된 모델 값이다.
	$parsers	함수들의 배열이다. 각 함수는 순서대로 DOM으로부터 값을 읽을 때마다 호출된다. 즉, $viewValue의 값이 바뀔 때 호출된다.  호출된 함수가 반환한 값은 다음 함수로 전달되고 최종적으로 $modelValue에 값이 전달된다.
	$formatters	함수의 배열이다. 각함수는 순서대로 바인딩된 데이터 ($modelValue)가 바뀔 때마다 호출된다.  호출된 함수가 반환한 값은 다음 함수로 전달되고 최종적으로 $viewValue에 전달된다.
	$viewChangeListeners	화면 요소의 값이 변경될 때마다 호출되는 함수의 배열이다. 해당 함수들은 어떠한 인자도 없이 호출되고 반환된 값은 무시한다.
	$error	휴효성 검증의 이름(required, email, minlength..)을 키로 하고 각 컨트롤 요소의 name을 값으로 가진 객체다.
	$pristine	사용자의 입력이 없었으면 true다
	$dirty	사용자의 입력이 있었으면 true다
	$valid	<form>에 있는 컨트롤 요소(input)가 모두 유효성 검증을 통과하면 true다.
	$invalid	<form>에 있는 컨트롤 요소(input)가 모두 유효성 검증을 통과하면 false다.
메서드	$render()	화면이 업데이트될 때마다 호출된다. 지시자를 만들어 NgModelController의 $render에 함수를 대입해 놓으면 화면이 업데이트될 때마다 호출된다.
	$setValidity(validationErrorkey, isValid)	유효성 상태를 설정하고 컨트롤 요소의 휴효성 상태가 변경될 떄 FormController에게 알려준다. validationErrorKey 값이 $error[validationErrorKey] = is Valid 형태로 되며 validationErrorKey는 카멜케이스 형태로 기술하면 css로 ng-valid-my-error/n-invalid-my-error와 같은 형태로 삽입된다.
	$isEmpty	입력 요소의 값이 빈 값인지 확인한다. 여기서 빈 값이란 undefined, null 또는 NaN이 해당된다. 그리고 해당 메서드를 오버라이드하면 빈 값에 대한 정의를 다시 할 수 있다.
	$setPristine	요소의 $pristine을 false로 변경한다.
	$setViewValue(value)	화면에 값을 추가한다.

5. CSS 클래스로 유효성 검증 결과 표현하기

- AgularJS는 컨트롤 요소의 유효성 검증 결과를 요소의 CSS 클래스로 알아서 추가해 준다.

가령 특정 텍스트 타입의 입력 요소가 필수 입력 요소인데 해당 입력 요소에 값이 주어지지 않으면 AngularJS는 ng-invalid CSS클래스를 해당 입력요소에

값이 추가한다. 그런데 값이 입력되면 ng-invalid CSS 클래스는 없어지고 ng-vaild CSS 클래스가 추가된다. 

이처럼 ng-required나 ng-pattern과 같은 유효성 검사를 위한 속성이 <input> 요소와 같은 컨트롤 요소에 사용되고 유효성 검증에 성공하면

ng-valid CSS 클래스가, 실패하면 ng-invalid CSS 클래스가 자동으로 추가되는 것이다.

또한 해당 입력요소에 사용자 입력이 없으면 ng-pristine CSS클래스가 추가되고 사용자 입력이 발생하면 ng-dirty CSS클래스가 추가된다.

6. 이벤트 처리를 위한 템플릿(이벤트 처리 지시자)

- AngularJS는 HTML 요소에서 발생하는 이벤트에 대한 처리를 자바스크립트를 사용하지 않고 할 수 있게 해준다. 

가령 특정 요소를 클릭하면 발생하는 클릭 이벤트를 ng-click 지시자를 이용해 이벤트 처리를 할 수 있다.

◈ 예 ) 제이쿼리를 사용해 특정 버튼을 클릭했을 떄의 이벤트 처리코드

<div id="button1" class="btn">클릭</div>>

$('div#button1').click(function(){

clickCount++;    //특정로직

});

AngularJS의 ng-click 지시자를 사용한 코드

<div class="btn" ng-click="clickCount++">

사용자 클릭 이벤트 외에도 마우스오버, 마우스엔터, 키프레스 등 다양한 이베트를 지원한다.

◈ AngularJS에서 제공하는 이벤트 지시자

이벤트명	지시자명	설명
click	ng-click	html 요소를 클릭했을 때 표현식이 계산된다.
dbclick	ng-dbclick	html 요소를 더블 클릭했을 때 표현식이 계산된다.
keydown	ng-keydown	키보드의 키를 누를 때 표현식이 계산된다.  $event 객체를 이용해 keyCode, altkey 값 등을 가지고 올수 있다.
keypress	ng-keypress	키보드의 키를 눌러 실제 문자가 입력됐을 때 표현식이 계산된다.  $event 객체를 이용해 keyCode, altkey 값 등을 가지고 올수 있다.
keyup	ng-keyup	키를 뗄 때 표현식이 계산된다. $event 객체를 이용해 keyCode, altkey 값 등을 가지고 올수 있다.
mousedown	ng-mousedown	마우스 버튼을 누를 때 표현식이 계산된다.
mouseenter	ng-mouseenter	마우스 포인터가 개체 안에 들어올 때 표현식이 계산된다.
mouseleave	ng-mouseleave	마우스 포인터가 개체 밖으로 나갈 때 표현식이 계산된다.
mousemove	ng-mousemove	마우스 포인터가 개체 위에서 움직일 때 표현식이 계산된다.
mouseover	ng-mouseover	마우스 포인터가 개체 위로 들어올 때 표현식이 계산된다.
mouseup	ng-mouseup	마우스 포인터가 개체위에 있는 동안 마우스 버튼을 뗄 때 표현식이 계산된다.
change	ng-change	<input>, <textarea> 요소에서 사용할 수 있다. 값이 변경됐을 때 표현식이 계산된다.
blur	ng-blur	<input>, <select>, <textarea>, <a> 요소에서 사용할 수 있다. 개체가 포커스를 읽을 때 표현식이 계산된다.

 - ng-change 지시자와 ng-blur 지시자를 제외한 다른 이벤트 지시자는 모든 요소에서 사용할 수 있다.

◈ 이벤트 지시자 사용법

<ANY ng-이벤트명="표현식">

...

</ANY>