폼

앵귤러는 폼을 2가지 방식으로 제공한다.

• 반응형 폼
• 템플릿기반 폼

반응형폼은 컴포넌트 클래스에 템플릿 폼엘리먼트 디렉티브와 바인딩할 폼콘트롤을 생성하며 동기식으로 값이 전달된다.

템플릿기반 폼은 폼코트롤없이 디렉티브와 컴포넌트 클래스가 비동기로 값이 전달된다.

반응형/템플릿기반 폼모두 템플릿 폼엘리먼트 값의 변화를 감지하고 컴포넌트 모델의 데이터를 갱신한다.

폼엘리먼트와 폼콘트롤클래스 인스턴스가 바인딩되면 ControlValueAccessor클래스 인스턴스가 생성되고 FormControl과 DOM 엘리먼트를 연결하는 역할을 한다.

반응형폼에서 템플릿 폼엘리먼트는 클래스에서 생성된 폼콘트롤 인스턴스와 1대1로 바인딩되기때문에 랜더링여부와 관계없이 동기화된다.

---

반응형폼

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

app.module에 반응형폼 모듈을 임포트해야 한다.

반응형폼에서는 컴포넌트에서 폼콘트롤 인스턴스를 생성해야 한다.

nameFC = new FormControl('');

템플릿에서는 폼엘리먼트에 formControl디렉티브바인딩을 한다.

<input id="name" type="text" [formControl]="nameFC">

이제부터는 nameFC 인스턴스를 사용해서 폼엘리먼트의 값뿐만아니라 상태확인, 유효성검사를 할 수 있다.

this.nameFC.setValue('Nancy');

setValue메소드를 사용하여 값을 변경할 수 있다.

[formControl]="nameFC" 형식은 < form>엘리먼트가 없을때 사용하는 방식이고 보통은 form엘리먼트가 있을때는 방식이 달라진다.

---

보통은 form엘리먼트내부에 여러개의 폼콘트롤들이 있으며 외부에 폼콘트롤들의 데이터를 전송하는 이벤트도 발생한다.

  profileForm = new FormGroup({
    firstNameFC : new FormControl(''),
    lastNameFC : new FormControl(''),
    address:new FormGroup({
      streetFC:new FormControl(''),
      cityFC:new FormControl(''),
      stateFC:new FormControl(''),
      zipFC:new FormControl('')
    }),
  });

FormGroup 인스턴스를 생성하고 하위에 객체형태로 폼콘트롤 인스턴스들과 중복하위의 폼그룹인스턴스를 만들 수 있다.

<form [formGroup]="profileForm">
  <label for="first:name">first name:</label>
  <input type="text" formControlName="firstNameFC" id="first:name" required><br>
  <label for="last:name">last name:</label>
  <input type="text" formControlName="lastNameFC" id="last:name" required >

  <div formGroupName="address">
    <label for="street">street : </label>
    <input type="text" id="street" formControlName="streetFC"><br>
    <label for="city">city : </label>
    <input type="text" id="city" formControlName="cityFC"><br>
    <label for="state">state : </label>
    <input type="text" id="state" formControlName="stateFC"><br>
    <label for="zip">zip : </label>
    <input type="text" id="zip" formControlName="zipFC"><br>
  </div>
  <button (click)="updateProfile()"  >click</button>
</form>

템플릿도 폼그룹에 구조에 맞추어 폼엘리먼트들을 배치하면 된다.

주의사항
form엘리먼트에 formGroup디렉티브를 바인딩을 하고 내부 폼콘트롤과 하위 폼그룹은 formControl, formGroup 디렉티브 바인딩하지 않고 formControlName, formGroupName디렉티브에 입력값만 전달한다.

profileForm인스턴스를 사용해서 폼그룹내 폼콘트롤들의 값을 변경할 수 있다.
profileForm.setValue()
profileForm.patchValue()

setValue는 폼엘리먼트의 구조에 일치하는 객체형태로 값을 전달해야 한다.
patchValue는 변경하고자하는 엘리먼트들만 객체형태로 값을 전달하면 된다.

    this.profileForm.patchValue({
      firstNameFC:'Nancy',
      address:{
        streetFC:'address191'
      }
    });