[AngularJS] 10. AngularJS를 이용한 form 관리
AngularJS Form?
AngularJS는 HTML5의 FORM도 확장한다. 요소에 대한 유효성 검사를 추가할 수 있는 방법을 제공함.
사용자의 액션에 따라 요소에 대한 클래스 상태값이 바뀐다. 이에 따라 더 동적으로 폼을 관리할 수 있는 것이다.
기본적인 form 양식을 만들었다. 컨트롤러에서 $scope를 콘솔 로그로 출력하도록 했다.
scope를 console.log로 확인해봤을때, form에 대한 데이터가 scope에 정의되어 있는 것을 확인할 수 있다.
form을 만드는 것 만으로도 angluarJS에 의해 FormController를 통해 관리 되고 있는 것이다.
form 내의 입력 요소들에 대한 접근을 하기 위해선 scope.f.msg.$viewValue 같은 형식으로 접근하면 된다.
form 내의 요소들은 ngModelController에 의해 관리 되고 있기 때문이다.
즉, form 요소의 유효성 상태나 사용자의 입력 상태를 FormController가 관리한다면, form 내부의 컨트롤 요소 각각의 유효성 상태나 사용자 입력 상태는 ngModelController가 관리하고 있다고 생각하면 된다.
Input Directive
<input>태그에서 사용할 수 있는 angularJS 디렉티브는 다음과 같다.
<input type="text" id="" name="" ng-model="" ng-required="" ng-minlength="" ng-maxlength="" ng-pattern="" ng-change=""
FormController
AngularJS를 사용하면 form 태그는 FormController의 인스턴스이고 name 속성을 통해 scope에서 접근할 수 있다.
NgModelController
form 태그 내부의 요소는 FormController 인스턴스의 NgModelController 인스턴스이다.
즉, $.scope.{formName}.{name} 형식으로 접근할 수 있다는 것이다.
이벤트 처리 지시자
AngularJS는 HTML에서 발생하는 이벤트에 대한 처리를 지원한다.
예제
폼 전송 시 폼의 상태와 내부의 입력 요소에 대한 값을 가져오는 예제이다.
추가로 form과 내부의 컨트롤 요소들은 상태에 따라 class 상태 값이 바뀐다.
23~24LINE을 보면 컨트롤 요소가 비어있냐 아니냐에 따라 CSS속성 값을 주도록 정의 되어 있다.
RESULT
