반응형 폼(Reactive Forms)

폼을 템플릿에서 조작하는 대신, 코드로 조작하려면 반응형 폼을 사용하는 것이 좋습니다.

참고: 자세한 내용은 반응형 폼 심화 가이드 문서를 참고하세요.

이번 튜토리얼에서는 반응형 폼을 어떻게 구성하는지 알아봅시다.

  1. ReactiveForms 모듈을 로드합니다

    app.ts 파일을 열고 @angular/forms 패키지로 제공되는 ReactiveFormsModule을 로드한 후에 컴포넌트 imports 배열에 추가합니다.

          
    import { ReactiveFormsModule } from '@angular/forms';@Component({  selector: 'app-root',  template: `    <form>      <label>Name        <input type="text" />      </label>      <label>Email        <input type="email" />      </label>      <button type="submit">Submit</button>    </form>  `,  imports: [ReactiveFormsModule],})

  2. FormControls로 FormGroup 객체를 생성하세요

    반응형 폼은 폼 컨트롤을 표현하는 용도로 FormControl 클래스를 사용합니다. 그리고 폼 컨트롤을 효율적으로 다루기 위해 객체 구조로 묶을 때는 FormGroup 클래스를 사용합니다.

    @angular/forms 패키지로 제공되는 FormControl과 FormGroup을 로드해서 폼 그룹을 생성한 후에, 폼 그룹 안에 name, email 프로퍼티로 FormControl을 선언합니다.

          
    import {ReactiveFormsModule, FormControl, FormGroup } from '@angular/forms';...export class App {  profileForm = new FormGroup({    name: new FormControl(''),    email: new FormControl(''),  });}

  3. FormGroup과 FormControl을 폼과 연결하세요

    FormGroup은 [formGroup] 디렉티브를 사용해서 폼과 연결할 수 있습니다.

    그리고 FormControl은 formControlName 디렉티브를 사용해서 개별 폼 필드와 연결할 수 있습니다. 템플릿에서 폼 코드를 이렇게 수정해 보세요:

          
    <form [formGroup]="profileForm">  <label>    Name    <input type="text" formControlName="name" />  </label>  <label>    Email    <input type="email" formControlName="email" />  </label>  <button type="submit">Submit</button></form>

  4. 폼을 수정합니다

    폼 그룹 안에 있는 데이터에 접근하려면 FormGroup 객체의 값을 참조하면 됩니다. 템플릿을 다음과 같이 수정합니다:

          
    ...<h2>Profile Form</h2><p>Name: {{ profileForm.value.name }}</p><p>Email: {{ profileForm.value.email }}</p>

  5. FormGroup 값에 접근해 보세요

    컴포넌트 클래스에 handleSubmit 함수를 추가해서 폼 제출 이벤트를 처리해 봅시다. 이 메서드는 폼 안에 있는 값을 표시합니다.

    컴포넌트 클래스에 handleSubmit() 메서드를 추가해 봅시다.

          
    handleSubmit() {  alert(    this.profileForm.value.name + ' | ' + this.profileForm.value.email  );}

  6. 폼에 ngSubmit을 추가합니다

    이제 폼 값에 접근할 수 있으니, 폼 제출 이벤트를 handleSubmit 메서드로 전달해 봅시다. Angular는 이런 경우를 위해 ngSubmit 이라는 이벤트 핸들러를 제공합니다. 폼 제출 이벤트가 발생했을 때 이 이벤트를 handleSubmit 메서드로 받을 수 있도록 폼 엘리먼트를 수정해 봅시다.

          
    <form  [formGroup]="profileForm"  (ngSubmit)="handleSubmit()">

이렇게 Angular에서 반응형 폼을 사용하는 방법을 알게 되었군요.

정말 잘 하셨습니다. 이제 폼 유효성 검사는 어떻게 하는지 알아봅시다.