폼/유효성 검사
ng-model : 바인딩 대상이 되는 모델명
name : 폼에서 사용하는 이름
ng-required : 필수 입력 여부
ng-minlength : 입력값의 최소 글자 수
ng-maxlength : 입력값의 최대 글자 수
ng-pattern : 입력값과 비교될 정규표현식
ng-charge : 사용자 입력이 발생할 때 실행될 정규표현식
사용 예)
See the Pen AngularJS- 폼/유효성 검사 by juein (@juein) on CodePen.
위 코드에서 $valid와 $error 는 AngularJs 에서 만들어진 FormController 다.
<form>은 FormController의 인스턴스이고, <form>의 name 속성에 준 값을 이용해 $scope에서 접근할수있다.
<form>의 이름이 testForm 이므로 $scope.testForm 으로 접근할 수 있다.
FormController의 속성과 메서드
$pristine : 사용자의 입력이 없었으면 true
$dirty : 사용자의 입력이 있었으면 true
$valid : <form>에 있는 input 요소의 유효성 검증이 통과되면 true
$invalid : <form?에 있는 input 요서의 유혀성을 통과하면 false
$error : 유효성 검증의 이름을 key로, 각 컨트롤 요소의 name을 값으로 가진 객체
$addControl() : 컨트롤 요소를 추가
$removeControl() : 컨트롤 요소를 제거
$setDirty() : $dirty 값을 바꾼다. 강제로 폼이 수정된 상태를 변경
$setValidity() : <form? 요소의 유효성 상태를 바꾼다
$setPristine() : <form? 요소의 $pristine 값을 false로 변경
FormController는 <form> 요소의 유효성 및 입력상태를 관리하고, <form> 요소 안에 있는 컨트롤,
input, select, textarea 등의 요소 개개의 유효성, 입력 상태는 NgModelController 가 관리한다.
NgModelController의 속성과 메서드
$viewValue : 화면에서 보이는 값
$modelValue : 컨트롤 요소가 바인딩 된 모델 값
$parsers : 함수들의 배열. $viewValue의 값이 바뀔때 호출되고, 호출된 함수가 반환한 값은 $modelValue에 전달된다.
$formatters : 함수의 배열. 각 함수느 순서대로 $modelValue가 바뀔 때마다 호출되고, 최종적으로 $viewValue로 값이 전달된다.
$viewChangeListeners : 화면 요소의 값이 변경 될 때마다 호출되는 함수의 배열. 반환값은 무시한다.
$error : 유효성 검증의 이름을 key로 하고, 각 컨트롤 요소의 name을 값으로 가진 객체
$pristine : 사용자의 입력이 없으면 true
$dirty : 사용자의 입력이 있었으면 true
$valid : <form>에 있는 input 요소의 유효성 검증이 통과되면 true
$invalid : <form?에 있는 input 요서의 유혀성을 통과하면 false
$render() : 화면이 업데이트 될 때마다 호출. NgModelController의의 $render에 함수를 대입해 놓으면 화면이 업데이트 될 때마다 호출된다.
$setValidity() : 유효성 상태를 설정하고 유효성 상태가 변경될때 FormController에게 알려준다.
$isEmpty : 입력 요소의 값이 빈 값인지 확인
$setPristine : $pristine을 false로 변경
$setViewValue() : 화면에 값을 추가한다
checkbox 타입 사용법
<input type="checkbox" ng-modal="문자열" name="문자열" ng-true-value="문자열" ng-false-value="문자열" ng-required="true/false" ng-change="문자열">
ng-model : 바인딩 대상이 되는 모델명
name : 폼의 이름
ng-true-value : 체크박스 체크시 바인딩 된 모델에 대입할 값 (default : true)
ng-false-value : 체크박스 체크 해제시 바인딩 된 모델에 대입할 값 (default : false)
ng-required : 필수 입력 여부
ng-chage : 사용자의 입력이 발생할 때 실행될 표현식
select 요소 사용법
<select ng-model="문자열" name="문자열" ng-options="표현식" ng-required="true/false">
ng-model : 바인딩 대상이 되는 모델명
name : 폼의 이름
ng-required : 필수 입력 여부
ng-options : 옵션을 나타내기 위한 별도의 정규표현식
ng-options은 ng-repeat처럼 반복적인 데이터를 위한 별도의 표현식을 제공해준다.
array/object : $scope에 있는 배열 또는 객체에 접근하는 표현식을
value : 배열 요소를 가리키는 내부변수 생성 표현식
label : <option> 요소의 라벨이 될 표현식
select : <select? 요소에 모델로 바인딩되는 표현식
group : <optgroup? 요소가 되는 표현식
사용 예)
See the Pen AngularJS- 폼/유효성 검사 2 by juein (@juein) on CodePen.