폼 개요

폼(Form)은 사용자의 입력을 받는 기능을 구현하기 때문에 앱을 개발할 때 아주 중요한 부분을 차지합니다. Angular에서 폼을 어떻게 사용하는지 알아봅시다.

Angular에는 템플릿 기반(template-driven) 폼과 반응형(reactive) 폼() 이렇게 두 종류의 폼이 있습니다. 이번 튜토리얼에서는 두 가지를 모두 조금씩 알아봅니다.

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

먼저 템플릿 기반 폼부터 시작해 봅시다.

1. 입력 필드 추가하기

   user.ts 파일을 열고 템플릿을 수정해서 framework라는 id를 갖는 text 입력 필드를 추가합니다.

         
   <label for="framework">  Favorite Framework:  <input id="framework" type="text" /></label>
       

2. FormsModule를 로드합니다

   Angular가 제공하는 폼과 데이터 바인딩 기능을 활용하려면 FormsModule을 로드해야 합니다.

   @angular/forms 패키지로 제공되는 FormsModule을 로드해서 User 컴포넌트의 imports 배열에 추가하세요.

         
   import {Component} from '@angular/core';import {FormsModule} from '@angular/forms';@Component({...imports: [FormsModule],})export class User {}
       

3. 입력 필드와 값을 바인딩하세요

   FormsModule에는 입력값과 클래스 프로퍼티를 바인딩하는 ngModel 디렉티브가 있습니다.

   ngModel 디렉티브를 사용하도록 입력 필드를 수정합시다. 클래스의 favoriteFramework 프로퍼티와 템플릿을 바인딩하려면 [(ngModel)]="favoriteFramework"와 같은 문법을 사용하면 됩니다.

         
   <label for="framework">  Favorite Framework:  <input id="framework" type="text" [(ngModel)]="favoriteFramework" /></label>
       

   코드를 수정하고 입력 필드에 값을 입력해 보세요. 그리고 화면이 어떻게 갱신되는지 확인해 보세요. (네, 정말 멋지죠?)

   참고: [()] 문법은 "박스 안에 있는 바나나" 로 기억하면 쉽습니다. 이 문법은 어트리뷰트 바인딩과 이벤트 바인딩을 합친 양방향 바인딩을 의미합니다. 양방향 바인딩에 대해 자세하게 알아보려면 양방향 바인딩 문서를 참고하세요.

Angular로 폼을 구현하는 첫 걸음을 내딛었습니다.

잘 하셨습니다. 계속 진행해보시죠!