템플릿기반형 폼

lee jae hwan·2022년 9월 2일

앵귤러

목록 보기
17/83

템플릿 기반 폼은 컴포넌트에 있는 데이터를 템플릿에 반영할 때, 템플릿에 입력한 데이터를 컴포넌트에 반영할 때 양방향 데이터 바인딩(two-way data binding)을 활용한다.

폼구성이 간단하다면 템플릿 기반 폼을 사용하는 것도 좋지만 폼 구성이 복잡하거나 확장성을 고려한다면 반응형 폼이 유리하다.


템플릿 기반 폼은 FormsModule이 제공하는 디렉티브로 구성한다.

NgModel 디렉티브는 폼 엘리먼트와 데이터 모델을 연결하는 디렉티브입니다. 사용자가 입력하는 동작에 반응하거나 유효성을 검사하고 에러를 처리하는 기능을 제공합니다.


NgForm 디렉티브는 최상위 FormGroup 인스턴스를 생성하며 < form > 엘리먼트를 추적하면서 폼 전체의 값과 전체 유효성 검사 결과를 관리하는 디렉티브입니다.

FormsModule을 로드하면 기본적으로 모든 < form > 태그에 이 디렉티브가 적용됩니다. NgForm 디렉티브를 수동으로 지정할 필요가 없습니다.


NgModelGroup 디렉티브는 FormGroup 인스턴스를 생성하고 DOM 엘리먼트와 연결하는 디렉티브입니다.

0개의 댓글