앵귤러에서는 폼작성을 위한 클래스와 스콥 변수를 지원한다. 이를 통해 폼 데이터와 화면을 제어할 수 있다. <form name="myForm">
을 설정하면 컨트롤러에서 $scope.myForm
으로 폼에 속한 인풋 엘레먼트에 접근할 수 있다. 또한 $scope.myForm.$dirty
등으로 폼 유효성에 대한 검증을 할수 있으며 이는 ng-dirty
와 같이 클래스명으로 설정된다. 앵귤러 폼의 기본 사용법과 몇가지 팁에 대해 정리해보자.
데이터 바인딩
우선 폼을 핸들링해야 하는데 이것은 form의 name 속성으로 연결할 수 있다.
<form name="myForm"> <input type="text" name="nickname" ng-model="name" /> <input type="number" name="age" ng-model="age" /> </form>
컨트롤러에서는 스코프 변수 $scope.myForm.nickname
와 $scope.myForm.age
와 연결된다. 스코프 변수에는 이것 말고도 $dirty, $valid, $invalid, $error
등의 속성이 있고 이것을 통해 입력값에 대한 정보를 가져올 수 있다. 예를 들어
- 폼 입력값을 수정했을 경우
$scope.myForm.$dirty=true
로 채워진다. - 입력한 데이터가 요구조건에 맞지 않을 경우
$scope.myForm.$invalid=true
- 입력한 데이터가 요구조건에 맞을 경우
$scope.myForm.$valid=true
값이 설정된다.
$valid, $invalid 속성을 좀더 살펴보자. 입력값을 검증하는 기준은 뭘까? html5 태그 속성과 앵귤러 디렉티브로 검증 기준을 설정할 수 있다.
<input type="text" required="true" ng-minlength="3" pattern="/^\d*$/" />
- required="true": 반드시 입력해야할 필드
- ng-minlength="3": 입력한 문자열의 최소 길이
- pattern="//": 입력한 필드값의 정규표현식
앵귤러 컨트롤러의 저장 함수에서는 템플릿의 폼 데이터를 검증한 뒤 검증에 통과하면 실제 저장하는 로직이 있을 것이다. 이때 폼데이터를 검증하기 위해 $scope.myForm.$valid 변수를 체크하여 진행하도록 하자.
클래스
입력 필드값의 검증결과가 따라 스코프 변수에 바인딩 되듯이 클래스명도 입력 필드값의 검증 결과에 따라 달라진다.
- .ng-dirty: 필드를 수정했을 경우
- .ng-invalid: 필드 입력값 검증 성공시
- .ng-invalid: 필드 입력값 검증 실패시
- 더보기
따라서 위 클래스를 재정의하여 입력 필드의 스타일을 변경할 수 있다.
기타 (Tips)
ng-trim
디렉티브는 입력값에 대해 좌우 공백을 제거한다.
<input type="text" ng-trim />
엔터키에 대해 이벤트를 걸고 싶다면 ng-keyup
을 사용할 수 있다.
<input type="text" ng-keyup="$event.keyCode === 13 && search()" />