«   2018/07   »
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31        
Archives
Today
42
Total
1,122,792
안정적인 DNS서비스 DNSEver
관리 메뉴

Blue Breeze

AngularJS - FormController/NgModelController 본문

FrontEnd/AngularJS

AngularJS - FormController/NgModelController

푸른바람 C/H 2014.12.25 08:30

AngularJS



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) 화면에 값을 추가한다.

'FrontEnd > AngularJS' 카테고리의 다른 글

AngularJS - 클래스로 유효승 검증  (0) 2014.12.30
AngularJS - 입력항목  (0) 2014.12.29
AngularJS - FormController/NgModelController  (0) 2014.12.25
AngularJS - 컨트롤러  (0) 2014.12.23
AngularJS - Show/Hide  (0) 2014.12.20
AngularJS - 비교, 조건문  (0) 2014.12.18
0 Comments
댓글쓰기 폼