반응형 폼(reactive form) 사용법 모음

 

 

1. FormControl을 단독으로 사용할 때

/* 컴포넌트 클래스 */
myControl = new FormControl();

<!-- 컴포넌트 템플릿 -->
<input [formControl]="myControl" />

 

 

2. FormGroup

/* 컴포넌트 클래스 */
myFormGroup = new FormGroup({
    myControl: new FormControl(),
    mycontrol2: new FormControl()
})

<!-- 컴포넌트 템플릿 -->
<form [formGroup]="myFormGroup">
    <input formControlName="myControl" />
    <input formControlName="myControl2" />
</form>

 

 

3. 중첩된 FormGroup

/* 컴포넌트 클래스 */
myFormGroup = new FormGroup({
    formGroupA: new FormGroup({
        myControlA: nwe FormControl(),
        myControlB: nwe FormControl()
    }),
    formGroupB: new FormGroup({
        myControlC: nwe FormControl(),
        myControlD: nwe FormControl()
    })
})

/* getter */
// formGroupA
get myControlA(){ return this.formGroup.get('formGroupA.myControlA'); }
get myControlB(){ return this.formGroup.get('formGroupA.myControlB'); }

// formGroupB
get myControlC(){ return this.formGroup.get('formGroupB.myControlC'); }
get myControlD(){ return this.formGroup.get('formGroupB.myControlD'); }

<!-- 컴포넌트 템플릿 -->
<form [formGroup]="myFormGroup">
    <div formGroupName="formGroupA">
        <input formControlName="myControlA" />
        <input formControlName="myControlB" />
    </div>
    <div formGroupName="formGroupB">
        <input formControlName="myControlC" />
        <input formControlName="myControlD" />
    </div>
</form>

 

 

https://angular.kr/guide/reactive-forms

 

자꾸 까먹어서 간략하게 써본다. (폼 빌더는 생략)

동적으로 폼 컨트롤을 만들때는 폼 어레이. (생략)