AngularJS - FormController/NgModelController

FormController와 NgModelController

ng-model

바인딩 대상이 되는 모델명

name

폼에서 사용하는 이름

ng-required

필수 입력여부

ng-minlength

입력박스에 입력되는 값의 최소 글자수

ng-maxlength

입력박스에 입력되는 값의 최대 글자수

ng-pattern

입력된 값과 비교될 정규표현식이며 /정규표현식/과 같은 값이 요구된다.

ng-change

사용자의 입력이 발생할 때 실행될 표현식

AngularJS는 표준 HTML 태그 또한 AngularJS 지시자로 만들 수 있다. 즉, <form>태그도 지시자로 간주하고 확장할 수 있다. 그래서 AngularJS는 폼으 ㅣ상태를 관리하기 위해서 FormController를 만들었다. 지시자에 별도의 컨트롤러를 지정살 수 있다. AngularJS기반의 웹 애플리케이션에서 각 <form>은 FormController의 인스턴스이고, <form>의 name속성에 준 값을 이용해 $scope에서 접근할 수 있다.

<form name="fm"> ... </form> 일 경우 $scope.fm 으로 접근할 수 있다.

표. FormController의 속성과 메서드 설명

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

표. NgModelController의 속성과 메서드 설명

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