TIL_171121 Angular Form

폼이란?

유효성 검사
간단한 템플릿 기반 폼과 더 복잡한 유효성 검사를 위한 리액티브(모델 기반) 폼
입력받아야 할 폼이 많고 복잡해지면 도입을 검토하자.

HTML 표준 폼

formvalidation과 정규표현식
쓸데없는 서버 요청을 막아 클라이언트로부터 서버를 보호해야 하는 프론트엔드 개발자.

HTML 표준 form - submit

  • 서버에 전송.
  • 페이지 전환(깜박거림).
  • form안의 요소들(그룹)이 하나라도 유효하지 않으면 전송할 수 없음

[참고]
태그 원리

  • form 요소(form 시작부터 끝까지)와 form 컨트롤요소(form 요소 안에 들어온 input과 같은 것들)
  • form 컨트롤이 form 요소 안에 들어와야 하는 이유는 자식요소로 담고 있어야 action과 method를 통해
  • HTML form의 (action(명사Noun)) method(동사verb)로 GET과 POST 밖에 쓸 수 없는데, 요청 파라미터를 붙여 쓸 것인지 아니면 request body에 payload를 담아 쓸 것인지만을 구분해서 쓰라고 정해놨기 때문이다.
  • 을 누르는 순간 따로 프로그래밍할 필요없이 알아서 서버로 데이터를 전송해준다. 그러나 이것은 화면전환을 필수적으로 요구한다.

앵귤러 - form control

  • name 어트리뷰트가 데이터의 이름이 됨
  • ngModel을 써줘야 control이 만들어짐
  • 각각의 input에 접근하기 위해서는 form 참조 변수를 사용
  • eg) userForm.value (참조변수:#userForm)
  • #name=”ngModel”: 유효성 검증 상태 추적이 가능

템플릿 기반 폼

  • 컴포넌트 템플릿에서 디렉티브를 사용하여 폼을 구성하는 방식
  • 필드의 형식, 유효성 검증 규칙을 모두 템플릿에서 정의
  • 비교적 간단한 폼에 사용

템플릿 기반 폼의 중심 디렉티브

####1. NgForm 디렉티브

  • FormsModule을 적용하는 순간, 모든 폼 요소는 Ngform디렉티브가 자동 적용 -> 템플릿 기반 폼이 됨
  • 그 기반을 쓰지 않으려면
    이라고 써줘야 함
  • submit이벤트를 인터셉트하여 폼데이터를 서버 전송 (즉, ‘페이지전환’기본동작 막음)
  • 이벤트 인터셉트하기위해 (ngSubmit) 이벤트 바인딩 사용
  • 템플릿 참조 변수에도 사용 가능, 참조변수에는 ngForm을 할당
  • 해당 참조 변수는 폼요소 자신을 가리킴
  • 유효성 검증을 하기 위해서 각각의 폼 컨트롤 요소에 ngModel 디렉티브를 선언해주어야 함.
  • NgForm을 통해 받는 프로퍼티 controls에는 각 폼 요소의 name 어트리뷰트에 기반한 자료를 받음
  • 따라서 name 어트리뷰트를 빼먹으면 안됨
    1
    2
    3
    4
    5
    <!--이벤트 인터셉트하기 위해 ngSubmit 이벤트 바인딩 사용 -->
    <form (ngSubmit)="onNgSubmit()"></form>
    <!-- 템플릿 참조변수에는 ngForm을 할당 -->
    <form #f="ngForm" (ngSubmit)="onNgSubmit(f)"></form>

2. NgModel 디렉티브

  • 폼 컨트롤 요소를 위해 사용
  • 자신이 적용된 폼 컨트롤 요소에 FormControl 인스턴스 생성
  • 양방향 데이터 바인딩과 달리, 괄호와 할당문 없이 선언
    1
    2
    <form #userForm="ngForm">
      <input type="text" name="userid" ngModel>

FormControl 인스턴스란?

  • 폼을 구성하는 기본 단위
  • 폼 컨트롤 요소의 값이나 유효성 검증 상태를 추적
  • 뷰와 폼 모델을 동기화된 상태로 유지

템플릿 기반 폼 유효성 검증 - AbstractControl클래스

  • 유효성 검증의 상태를 나타내는 프로퍼티를 가지고 있음
  • errors, invalid, valid, pristine, undouched, dirty 등
  • untouched: fousin -> focusout되면 false
  • pristine: 값이 한번이라도 입력된 상태 false
  • *ngIf를 사용해서 에러메시지를 출력하는게 좋음 -> 조건에 부합하면 DOM에서 사라지기 때문
  • 에러메시지는 값을 입력하고 focusout됐을 때 출력되야 함.
  • errors => invalid: true, untouched: false

리액티브 폼

  • 컴포넌트 기반으로 폼모델을 구성
  • 템플릿 기반에 비해, 폼모델이 복잡할 경우 사용 (form이 15개 이상이거나 많은 검증이 필요할때)
  • formControlName이 템플릿기반 폼에서의 ‘name’역할을 함
  • 입력받으면서 이전 데이터들을 포함해서 계속해서 기다리며 관리
  • form* 접두사가 붙은 디렉티브(formGroup, formGroupName, formControlName, formArrayName)이 핵심

에서 프로퍼티 바인딩이 쓰이지 않은 이유?

순수한 문자열을 프로퍼티 바인딩할 때에는 프로퍼티 바인딩을 하지 않고 바로 어트리뷰트=“문자열”로 표현할 수 있다