템플릿 폼(template form) 관련 사용법

 

 

반응형 폼과 비교하면서 써보자.

자꾸 두 개를 헷갈려한다...

 

1. 폼 구성

// template form
export class Hero {
  constructor(
    public id: number,
    public name: string,
    public power: string,
    public alterEgo?: string
  ) {  }
}

@Component({ selector: 'my-form' })
export class HeroFormComponent {
    model = new Hero(18, 'Dr. IQ', 'super strength', 'Chuck Overstreet');
}

// reactive form
myFormGroup = new FormGroup({
    myControl: new FormControl(),
    mycontrol2: new FormControl()
})

 

템플릿 폼은 폼에 대한 구성을 객체 모델로 만들고 컴포넌트 클래스에서 변수에 객체 모델을 할당해줘야 한다. 반면, 반응형 폼은 FormGroup / FormControl 인슨턴스를 각각 구성에 맞게 만든다.

 

2-1. 바인딩 (ngModel, FormControl)

<!-- template form -->
<input [(ngModel)]="model.name" name="name">

<!-- reactive form -->
<!-- A: 단일 -->
<input [formControl]="myControl"/>
<!-- B: form 사용할때 -->

<form [formGroup]="myForm">
    <input formControlName="myControl"/>
</form>

 

템플릿 폼은 반드시 양방향 바인딩으로 사용해야 하며, name 프로퍼티를 꼭 넣어줘야 한다.

 

2-2. 폼 단일 상태에 접근( ngModel, FormControl)

<!-- template form -->
<input [(ngModel)]="model.name" name="name" #name="ngModel">
<!-- OK -->
<span *ngIf="name.valid">유효하지 않습니다.</span>
<!-- WRONG -->
<span *ngIf="model.name.valid">유효하지 않습니다.</span>


<!-- reactive form -->
<!-- A: 단일 -->
<input [formControl]="name"/>
<span *ngIf="name.valid">유효하지 않습니다.</span>

<!-- B: form 사용할때 -->
<form [formGroup]="myForm">
    <input formControlName="name"/>
    <span *ngIf="name.valid">유효하지 않습니다.</span>
</form>

 

모델 구성원에게 접근할때 참조변수를 사용하고 ngModel을 할당해줘야 한다.

 

 

2-2. 폼 전체 상태에 접근 (ngForm, FormGroup)

<!-- template form -->
<form #myForm="ngForm">
    <input [(ngModel)]="model.prop">
</form>

<!-- reactive form -->
<form [formGroup]="myFormGroup">
    <input formControlName="name">
</form>

 

템플릿 폼: 참조변수를 사용.

반응형 폼: 폼안에서는 'formControlName'으로 사용해야 한다.