폼 기초 - 템플릿 기반 폼이란 무엇인가? & 사용자 정보 입력 폼 만들어 보기 (Angular 16 기준)
서론
Angular 16에서는 사용자 입력을 수집하고 처리하기 위해 폼을 사용합니다. 폼은 데이터를 수집하고 검증하는 기본적인 UI 요소로, 템플릿 기반 폼과 반응형 폼 두 가지 방식이 있습니다. 이번 글에서는 템플릿 기반 폼의 개념을 설명하고, 사용자 정보 입력 폼을 직접 만들어보는 실습을 통해 기본적인 사용법을 익혀보겠습니다.
본론
1. 템플릿 기반 폼이란 무엇인가?
템플릿 기반 폼의 개념
템플릿 기반 폼은 HTML 템플릿에서 폼을 정의하고, Angular가 자동으로 폼 요소들을 관리해주는 방식입니다. 주로 소규모 프로젝트나 간단한 폼을 빠르게 구현할 때 유용합니다. Angular의 FormsModule을 사용해 폼 요소에 양방향 데이터 바인딩을 적용할 수 있으며, 폼의 유효성 검사(Validation)도 템플릿에서 설정할 수 있습니다.
템플릿 기반 폼의 특징
- 간단한 폼 구현에 적합: 기본적인 폼을 HTML 템플릿에서 정의할 수 있습니다.
- ngModel을 이용한 데이터 바인딩: 폼 필드와 컴포넌트의 데이터를 양방향으로 바인딩합니다.
- 폼 상태 관리: Angular가 자동으로 폼의 상태(valid, invalid)를 관리하며, 템플릿을 통해 쉽게 확인할 수 있습니다.
2. 사용자 정보 입력 폼 만들기
이제 Angular의 템플릿 기반 폼을 사용하여 간단한 사용자 정보 입력 폼을 만들어보겠습니다. 폼에는 이름, 이메일, 나이 입력 필드를 포함하고, Submit 버튼을 추가해 폼을 제출하는 기능을 구현할 것입니다.
1) FormsModule 추가하기
템플릿 기반 폼을 사용하려면 FormsModule이 필요합니다. FormsModule을 AppModule에 추가하여 폼 기능을 사용할 준비를 합니다.
// app.module.ts
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [
BrowserModule,
FormsModule // 템플릿 기반 폼을 위한 FormsModule 추가
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
2) 컴포넌트에 사용자 데이터 모델 정의하기
컴포넌트에서 사용자 정보를 저장할 모델을 정의합니다. 여기서는 name, email, age 세 가지 속성을 포함하는 user 객체를 정의합니다.
// app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
user = {
name: '',
email: '',
age: null
};
onSubmit() {
console.log('폼 제출됨', this.user);
}
}
- user 객체: 사용자 정보를 저장하는 객체로, name, email, age 속성을 가집니다.
- onSubmit() 메서드: 폼 제출 시 실행되는 메서드로, 현재 user 데이터를 콘솔에 출력합니다.
3) 템플릿에서 폼 구현하기
app.component.html 파일에 사용자 정보를 입력받는 폼을 정의합니다. ngModel을 사용해 user 객체의 속성과 각 입력 필드를 양방향 바인딩합니다.
<!-- app.component.html -->
<div>
<h2>사용자 정보 입력</h2>
<form (ngSubmit)="onSubmit()" #userForm="ngForm">
<!-- 이름 입력 필드 -->
<label for="name">이름:</label>
<input type="text" id="name" [(ngModel)]="user.name" name="name" required>
<div *ngIf="userForm.controls['name']?.invalid && userForm.controls['name']?.touched">
이름을 입력하세요.
</div>
<!-- 이메일 입력 필드 -->
<label for="email">이메일:</label>
<input type="email" id="email" [(ngModel)]="user.email" name="email" required>
<div *ngIf="userForm.controls['email']?.invalid && userForm.controls['email']?.touched">
올바른 이메일 주소를 입력하세요.
</div>
<!-- 나이 입력 필드 -->
<label for="age">나이:</label>
<input type="number" id="age" [(ngModel)]="user.age" name="age" required min="1">
<div *ngIf="userForm.controls['age']?.invalid && userForm.controls['age']?.touched">
유효한 나이를 입력하세요.
</div>
<!-- 폼 제출 버튼 -->
<button type="submit" [disabled]="userForm.invalid">제출</button>
</form>
</div>
- (ngSubmit)="onSubmit()": 폼이 제출될 때 onSubmit 메서드를 호출합니다.
- [(ngModel)]: 각 입력 필드와 user 객체의 속성을 양방향 바인딩합니다.
- name 속성: ngModel을 사용한 양방향 바인딩에는 name 속성을 추가해야 Angular가 폼의 각 필드를 추적할 수 있습니다.
- 유효성 검사 메시지: *ngIf를 사용해 각 입력 필드가 유효하지 않거나 입력되지 않았을 경우 오류 메시지를 표시합니다.
4) 폼 상태 및 유효성 검사 적용하기
각 입력 필드에는 required, min, type="email" 등의 유효성 검사 조건을 설정해 필수 입력 및 올바른 형식을 요구합니다. 폼 제출 버튼은 전체 폼이 유효하지 않은 경우 비활성화됩니다.
- required: 모든 필드를 필수 입력으로 설정합니다.
- type="email": 이메일 형식을 요구합니다.
- min="1": 나이 필드에 최소값을 설정하여 1 이상의 값을 요구합니다.
- [disabled]="userForm.invalid": 폼 전체가 유효하지 않을 경우 제출 버튼을 비활성화합니다.
5) 결과 확인하기
이제 ng serve로 Angular 개발 서버를 실행하고 브라우저에서 결과를 확인합니다.
ng serve
브라우저에서 http://localhost:4200에 접속하면, 사용자 정보를 입력받는 폼이 표시됩니다. 모든 필드를 올바르게 입력한 후 제출 버튼을 클릭하면 onSubmit() 메서드가 호출되고, 입력된 데이터가 콘솔에 출력됩니다.
결론
이번 글에서는 Angular 16의 템플릿 기반 폼 개념과 기본적인 사용자 정보 입력 폼을 만드는 방법을 학습했습니다. 템플릿 기반 폼은 ngModel을 사용해 폼 필드와 데이터 모델 간의 양방향 데이터 바인딩을 제공하며, 간단한 유효성 검사도 쉽게 적용할 수 있어 매우 유용합니다. 앞으로 템플릿 기반 폼을 활용해 다양한 사용자 입력 폼을 만들고, Angular에서 제공하는 더 많은 폼 기능을 실습해보세요.
Q&A 섹션
- Q1: 템플릿 기반 폼과 반응형 폼의 차이점은 무엇인가요?
A1: 템플릿 기반 폼은 HTML 템플릿에서 폼 로직을 정의하고, 반응형 폼은 TypeScript 코드에서 폼 구조와 검증을 정의하여 복잡한 폼을 구현하는 데 적합합니다.
- Q2: ngModel을 사용할 때 name 속성은 꼭 필요한가요?
A2: 네, name 속성은 Angular가 폼 필드를 추적하기 위해 필요합니다. 특히 템플릿 기반 폼에서는 필수 속성입니다.
- Q3: 템플릿 기반 폼에서 유효성 검사는 어떻게 적용하나요?
A3: 템플릿에서 required, min, type="email" 등의 HTML 속성을 사용하여 필드의 유효성 검사를 정의할 수 있습니다.
관련 태그
- #angular-템플릿-기반-폼
- #ngModel
- #폼-유효성-검사
- #angular-16
- #프론트엔드-개발