템플릿 기반 Forms

이 수업에서는 Angular의 템플릿 기반 Forms를 소개하여 간단한 Forms를 빠르게 만드는 방법을 알아봅니다.

템플릿 기반 Forms란 무엇인가요?

템플릿 기반 Forms는 HTML 템플릿과 Angular 지시문을 사용하여 Form 생성, 유효성 검사, 제출을 쉽게 처리합니다.

FormsModule 가져오기

템플릿 기반 Forms를 사용하려면 Angular 모듈에 FormsModule을 가져오세요:

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

간단한 Form 만들기

ngForm 지시문을 사용하여 템플릿에 간단한 Form을 정의하세요:

<form #form="ngForm">
  <input name="username" ngModel>
</form>

ngModel을 사용한 양방향 바인딩

ngModel은 양방향 데이터 바인딩을 사용하여 Form 컨트롤을 컴포넌트 속성에 연결합니다:

<input [(ngModel)]="user.name" name="username">

Form 제출

Angular의 이벤트 바인딩을 사용하여 Form 제출을 쉽게 처리하세요:

<form (ngSubmit)="onSubmit(form)" #form="ngForm">

Form 유효성 검사

Angular는 required 및 minlength와 같은 편리한 유효성 검사 지시문을 제공합니다:

<input name="username" ngModel required minlength="4">

Form 상태에 접근하기

템플릿 변수를 통해 유효성이나 터치 여부와 같은 Form 상태에 접근하세요:

<div *ngIf="form.invalid && form.touched">Form is invalid!</div>

요약

템플릿 기반 Forms를 사용하여 Forms를 쉽게 만들고, 바인딩하고, 유효성을 검사하고, 제출하는 방법을 학습하셨습니다. 계속 연습하세요!