앵귤러 라이브러리 - Angular Forms

 

폼은 많은 애플리케이션에서 사용되는 기능 중 하나이죠. 앵귤러 폼 라이브러리 사용 시 validation 등 다양한 기능을 사용할 수 있는데요. 앵귤러 폼 라이브러리에서 제공하는 폼은 크게 'reactive'와 'template-driven' 방식으로 나누어집니다.

차이점

reactive 폼은 컴포넌트에서 폼객체 생성, 설정 (제약조건 포함) 하고 이를 템플릿에서 binding의 형식으로 사용하기 때문에 확장성이 높고 보안성이 뛰어난 장점이 있습니다. 반면, template-driven 폼은 템플릿에서 폼객체 생성, 설정 (제약조건 포함)을 하기 때문에 가시성이 좋으나 확장성은 떨어집니다.

	reactive	template-driven
Setup of form model	Explicit, created in component class	Implicit, created by directives
Data model	Structured and immutable	Unstructured and mutable
Data flow	Synchronous	Asynchronous
Form validation	Functions	Directives

사용방법

• reactive 폼 사용하기
• template-driven 폼 사용하기

추가설명

공통적으로 폼의 상태를 추적하고 입력된 값을 가져올 수 있는데요. 두 형식 모두 아래 클래스를 기반으로 작동합니다.

FormControl: 개별필드

Angular

FormGroup: 필드의 그룹

 

Angular

FormArray: 비슷한 폼컨트롤의 집합

 

Angular

ControlValueAccessor: 폼컨트롤과 DOM 요소 연결

 

Angular

---

참고

Angular