폼 유효성 검사

폼을 다루다 보면 폼에 입력된 값을 제출하기 전에 유효성 검사를 해야 하는 경우가 일반적입니다.

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

이번 튜토리얼에서는 반응형 폼의 유효성을 검사해 봅시다.

1. 유효성 검사 함수를 로드합니다

   Angular는 자체 유효성 검사 툴을 제공합니다. 이 툴을 사용하려면 먼저 @angular/forms 패키지로 제공되는 Validators를 로드합니다.

         
   import {ReactiveFormsModule, Validators} from '@angular/forms';@Component({...})export class App {}
       

2. 폼에 유효성 검사 함수를 적용하세요

   FormControl은 폼 컨트롤의 값을 검사하기 위해 Validators 를 인자로 받을 수 있습니다. 예를 들면, profileForm 중 name 필드 값이 필수라면 Validators.required를 지정하면 됩니다. 그리고 email 필드가 값이 필수인 동시에 유효한 이메일 형식인지 검사하려면 Validators.required와 Validators.email을 배열로 묶어서 적용하면 됩니다. name 폼 컨트롤과 email 폼 컨트롤을 수정해 봅시다:

         
   profileForm = new FormGroup({  name: new FormControl('', Validators.required),  email: new FormControl('', [Validators.required, Validators.email]),});
       

3. 템플릿에 유효성 검사 함수를 적용하세요

   폼에 입력된 값들이 적절한지 확인하려면 FormGroup 클래스에 있는 valid 프로퍼티를 참조하면 됩니다. 이 프로퍼티는 어트리뷰트로 바인딩되어 동적으로 값이 변경되는 프로퍼티입니다. 폼 유효성 상태에 따라 폼 제출 버튼을 비활성화하는 기능을 추가해 보세요.

         
   <button type="submit" [disabled]="!profileForm.valid">Submit</button>
       

지금까지 반응형 폼에 기본적인 유효성 검사 적용방법을 알아봤습니다.

Angular에서 폼을 다루는 데 필요한 핵심 개념에 대해 학습을 잘 마치셨습니다! 더 자세한 내용은 Angular 폼 문서를 참고하세요.