[Study]Angular_Form Group/Form Builder

보통 프론트에서 form은 데이터를 수정하기 위한 하나의 양식으로써 많이 사용된다. 

이렇나 form에 대해서는 중요한 특성들이 있다.

 

1. 이렇게 수정된 데이터는 다른 곳에서도 반영이 되어야 한다.

2. 사용자는 정해진 구조대로만 입력하지 않으므로 입력 내용을 프론트의 form에서 검증해주어야 한다.

3. 이러한 상황에서 사용자가 잘못 입력할 경우를 방지하기 위한 입력 예시나, 혹은 오류에 대해 적시하는 UI를 제시해야 한다.

 

이에 대해 angular는 위와 같은 기능들을 지원하기 위한 도구들을 지니고 있다.

1. form control은 폼에 입력된 내용을 캡슐화하고, 이를 처리할 수 있도록 한다.

2. Validator는 일정 방식에 따라 입력 내용을 검증한다.

3. observer는 폼을 주시하다가 변경 내용에 맞춰서 응답한다.

(react의 함수형 컴포넌트에서 useEffect 같군....)

 

Form Control

하나의 입력필드를 나타낸다. 앵귤러 폼에서 가장 작은 단위이다. 

입력된 값이 유효한지 변경되었는지, 오류가 있는지 적시한다.

 

Form Group

실제로 폼에서는 필드 즉 form control이 여러개 있다. 따라서 여러 필드를 일일이 반복 처리하는 것은 비효율이다.

form group은 여러 form control을 하나의 그룹으로 묶어서 한꺼번에 묶어서 처리하도록 하여 위와 같은 단점을 극복한 것이다.

 

이러한 form을 사용하기 위해서는 angular자체적으로 제공하는 form module을 로드해야 한다.

전체 프로그램의 시동역할을 하는 app.module.ts의 NgModule에 form module을 가지고 와서 사용하면 된다.

import { FormsModule } from '@angular/forms';

그리고 실제 사용하려는 component에서는 아래와 같이 로드하여 사용할 수 있다.

import { FormGroup, Validators, FormBuilder } from '@angular/forms';

 

Form Builder

이는 form을 더 세부적으로 조절할 수 있는 옵션을 제공하는 폼설정 방법이다.

 

component파일에서는 아래와 같이 정의하여 사용가능하다.

import { FormGroup, FormBuilder } from '@angular/forms';
 
//'''중략''''
 
export class  DemoComponent implements Oninit {
    myForm : FormGroup;
 
    constructor(fb: FormBuilder) {
        this.myForm = fb.group({
            'sku' : ['abc']
        })
    }
}
 

 

form builder에서 사용가능한 함수에는 아래와 같이 두가지가 있다.

control : 새 Form Control을 만든다

group : 새 Form Group을 만든다.

 

위에서는 form builder을 사용해서 form group을 만들고 있는 것이다.

해당 form group은 sku라는 컨트롤을 하나 설정 받고, 그 value가 ['abc'] 이다.

우선 기본값으로 abc를 받고, 뷰에서 만들어진 form을 사용하게 된다,

 

위에서 정의한 form을 뷰에서는 아래와 같이 사용할 수 있다.

<form [formGroup] = "myForm">
    <label for="skuInput"> SKU </label>
    <input type="text"
            id = "skuInput"
            placeholer = "SKU"
            [formControl] = "myForm.controls['sku']">
 

 

-> validator를 통해 필드 값을 정하면서 검증과정을 추가 할 수도 있다.

 

 

 

Reference

 

m.blog.naver.com/PostView.nhn?blogId=edy5016&logNo=221278396941&proxyReferer=https:%2F%2Fwww.google.com%2F