[AngularJS] 폼/유효성 검사를 위한 템플릿

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

name : 폼에서 사용하는 이름

ng-required : 필수 입력 여부

ng-minlength : 입력값의 최소 글자 수

ng-maxlength : 입력값의 최대 글자 수

ng-pattern : 입력값과 비교될 정규표현식

ng-charge : 사용자 입력이 발생할 때 실행될 정규표현식

유효성 검사 예제

↑ 위 인풋값에서 각 값을 넣어 유효성검사를 해보자.

<form name="sampleForm" ng-init="name = 'test'">
    name : <input type="text" name="name" ng-model="name" ng-maxlength="3" ng-required="true">
    <span class="error" ng-show="sampleForm.name.$error.required">필수입력</span><br>

    phone number : <input type="text" name="tel" ng-model="tel" ng-pattern="/^\d{3}-\d{3,4}-\d{4}$/">
    <span class="error" ng-show="sampleForm.tel.$error.pattern">000-0000-0000</span><br>

    <p>user info : {{name}} / {{tell}}</p>
    <p>sampleForm.name.$valid = {{sampleForm.name.$valid}}</p>
    <p>sampleForm.name.$error = {{sampleForm.name.$error}}</p>
    <p>sampleForm.tel.$valid = {{sampleForm.tel.$valid}}</p>
    <p>sampleForm.tel.$error = {{sampleForm.tel.$error}}</p>
    <p>sampleForm.$valid = {{sampleForm.$valid}}</p>
    <p>sampleForm.$error.required = {{!sampleForm.$error.required}}</p>
</form>

위 코드에서 사용된 $valid와 $error 는 AngularJs 에서 만들어진 FormController 다.

<form>은 FormController의 인스턴스이고, <form>의 name 속성에 준 값을 이용해 $scope에서 접근할수있다.

위 코드에선 <form>의 이름이 sampleForm 이므로 $scope.sampleForm 으로 접근할 수 있다.

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 가 관리한다.

FormController와 마찬가지로 컨트롤 요소는 모두 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 : 사용자의 입력이 발생할 때 실행될 표현식

checkbox input 요소 예제

<form name="testForm" ng-init="value1 = true; value2 = 'test_true';">
    option 1 : <input type="checkbox" name="check1" ng-model="value1"><br>
    option 2 <input type="checkbox" name="check2" ng-model="value2" 
    ng-true-value="test_true" ng-false-value="test_false">
    <p>option 1 에 바인딩 된 값 : {{value1}}</p>
    <p>option 2 에 바인딩 된 값 : {{value2}}</p>
</form>

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? 요소가 되는 표현식

select 요소 사용 예제

<div ng-init="testList = [{name:'list_1', code:'0001'}, {name:'list_2', code:'0002'}, {name:'list_3', code:'0003'}]">
    <form name="testFrm">
        <select ng-model="testName" ng-options="test.name for test in testList">
            <option value="">name</option>
        </select>

        <select ng-model="testName" ng-options="test.code for test in testList">
            <option value="">code</option>
        </select>
    </form>
</div>