formGroup : 디렉티브
FormGroup : 클래스
FormGroup 클래스
class FormGroup extends AbstractControl {
constructor(controls: { [key: string]: AbstractControl; }, validatorOrOpts?: ValidatorFn | AbstractControlOptions | ValidatorFn[], asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[])
}첫번째 인자
controls: { [key: string]: AbstractControl; }
폼콘트롤들을 인덱서블 객체형태
두번째 인자
동기식 유효성검사 함수
세번째 인자
비동기식 유효성검사 함수
formGroup 디렉티브
DOM에 있는 폼엘리먼트와 FormGroup 클래스 인스턴스를 바인딩한다.
@Input('formGroup') form: FormGroup<form [formGroup]="heroForm" (ngSubmit)="onSubmit()">formGroup디렉티브는 입력프로퍼티로 받은 FormGroup타입의 클래스인스턴스를 DOM 폼엘리먼트와 바인딩하는 역활을 하는 것이기 때문에 템플릿에서 formGroup디렉티브를 사용할 수 없으며 이렇게 하려면 템플릿에서 사용할 수 있는 formGroup 인스턴스가 있어야 한다.
ngForm디렉티브가 formGroup타입의 인스턴스를 생성하고 폼엘리먼트에 바인딩후 반환한다.
<form #formIns="ngForm" >템플릿에서 formIns를 사용해서 프로퍼티들과 메소드를 사용할 수 있다.
submitted 프로퍼티와 AbstractControlDirective로부터 상속받은 invalid, pending...등 많은 프로퍼티가 있다.
onSubmit(), onReset(), resetForm()등 여러 메소드를 가지고 있다.
<form #formIns="ngForm" [formGroup]="heroForm">ngForm 디렉티브와 formGroup 디렉티브는 독립적으로 작동한다.
템플릿폼에서는
<form #formIns="ngForm">FormGroup인스턴스가 만들어지지 않으므로 위와같이 ngForm디렉티만 사용한다.
반응형폼에서는
<form #formIns="ngForm" [formGroup]="heroForm">FormGroup인스턴스를 생성하므로 위와같이 사용한다.
formGroup="{{heroForm}}"
{{heroForm}}은 문자열로 형변환하기때문에 사용할 수 없다.
