Angular에서 다루는 form은 두 가지이다.
1. Reactive forms
2. Template-driven forms (참고링크)
[1] 다른 점
| Reactive | Template-driven | |
| Setup | 명시적, 컴포넌트 클래스에서 생성 new FormControl('') |
암시적, 디렉티브에 의해 생성됨 |
| Data model | 구조화 및 불변 (Structured and immutable) |
구조화되지 않고 변경 가능 (Unstructured and mutable) |
| Data flow | 동기식 | 비동기식 |
| Form validation | functions | directives |
[2] 확장성의 차이
Reactive form
① 뷰와 데이터 모델 간에 동기식 데이터흐름
② 테스트를 위한 설정이 덜 필요 → change detection에 대한 깊은 이해가 필요하지 않다.
Template-driven from
① 뷰와 데이터 모델 간에 비동기식 데이터흐름
② 테스트를 위한 설정 필요 → change detection 실행에 크게 의존하며 더 많은 설정이 필요.
※ model → view 로 데이터를 흘려보낼 때 ChangeDetectionStategy "OnPush"의 설정이 있을 경우, 데이터가 view에서 보이지 않는다.
[3] 모델 설정 방식
Reactive form & Template-driven from 은 공통 양식(인스턴스)을 사용한다. (아래 ① ~ ④) 하지만 어떻게 생성하고 어떻게 관리하는지에 따라 다름을 알 수 있다.
① FormControl - Tracks the value and validation status of an individual form control. (input 각각, 개별적으로)
② FormGroup - Tracks the same values and status for a collection of form controls. (input 을 묶음별로)
③ FormArray - Tracks the same values and status for an array of form controls. (배열 형태의 input)
④ ControlValueAccessor - FormControl 인스턴스와 내장 DOM 요소 사이를 연결시켜준다.
[4] 설정 - Reactive form
① root module 에서 ReactiveFormModule을 설정해줘야 한다.
② 컴포넌트 클래스 안에서 form model을 설정한다.
③ FormControl 인스턴스를 import 한 뒤 template에서 formControl 디렉티브를 사용해 컴포넌트와 연결해주어 데이터 바인딩을 한다.
form model = FormControl
form model is the source of truth: It provides the value and status of the form element at any given point in time.
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
@Component({
selector: 'app-reactive-favorite-color',
template: `
Favorite Color: <input type="text" [formControl]="favoriteColorControl">
`
})
export class FavoriteColorComponent {
favoriteColorControl = new FormControl('');
}
[4] 설정 - Template-driven form
import { Component } from '@angular/core';
@Component({
selector: 'app-template-favorite-color',
template: `
Favorite Color: <input type="text" [(ngModel)]="favoriteColor">
`
})
export class FavoriteColorComponent {
favoriteColor = '';
}
Template is the source of truth: You do not have direct programmatic access to the FormControl instance
Template-driven form 관련 지시자: ngForm, ngModel, ngModelGroup, ngSubmit대표적으로 사용하는 참조변수 형태: #frm, #frmRegister, #txtName, #txtEmail
댓글