[angular] Angular 폼 비동기 유효성 검사

26 Dec 2023

angular

Angular 애플리케이션에서 사용자 입력을 검증하기 위해 Angular 폼의 유효성 검사를 사용할 수 있습니다. 일반적으로 동기적 유효성 검사는 쉽게 구현할 수 있지만, 경우에 따라서는 서버와의 통신 또는 복잡한 비동기 작업이 필요할 수 있습니다. Angular에서는 이러한 상황에 대비하여 비동기 유효성 검사를 간단하게 구현할 수 있도록 지원하고 있습니다.

1. 비동기 Validator 구현

Angular 폼의 비동기 유효성 검사를 구현하기 위해서는 AsyncValidatorFn을 사용해야 합니다. 이것은 비동기 검사를 수행하는 함수를 나타냅니다. 다음은 예시 코드입니다.

import { AsyncValidatorFn, AbstractControl } from '@angular/forms';
import { Observable, of } from 'rxjs';
import { map, catchError } from 'rxjs/operators';

export function uniqueUsernameValidator(usernameService: any): AsyncValidatorFn {
  return (control: AbstractControl): Observable<{ [key: string]: any } | null> => {
    return usernameService.checkUsername(control.value).pipe(
      map(res => {
        return res.isUnique ? null : { usernameTaken: true };
      }),
      catchError(() => {
        return of({ usernameTaken: true });
      })
    );
  };
}

위의 코드에서는 uniqueUsernameValidator라는 비동기 검사 함수를 정의하고 있습니다. 이 함수는 서버에 사용자명의 유일성을 확인하기 위해 usernameService를 사용합니다.

2. 폼 컨트롤에 Validator 할당

이제 위에서 구현한 비동기 Validator 함수를 Angular 폼 컨트롤에 할당해야 합니다. 다음은 이를 수행하는 예시 코드입니다.

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { uniqueUsernameValidator } from './validators';

@Component({
  selector: 'app-user-form',
  template: `
    <form [formGroup]="userForm">
      <input formControlName="username" />
      <div *ngIf="userForm.get('username').pending">검사 중...</div>
      <div *ngIf="userForm.get('username').errors?.usernameTaken">이미 사용 중인 사용자명입니다.</div>
    </form>
  `
})
export class UserFormComponent implements OnInit {
  userForm: FormGroup;

  constructor(private fb: FormBuilder, private userService: any) { }

  ngOnInit() {
    this.userForm = this.fb.group({
      username: ['', {
        validators: Validators.required,
        asyncValidators: uniqueUsernameValidator(this.userService),
        updateOn: 'blur'
      }]
    });
  }
}

위의 코드에서는 userForm의 username 폼 컨트롤에 uniqueUsernameValidator 함수를 할당하고 있습니다. 또한, 템플릿에서 userForm.get('username').pending을 사용하여 검사가 진행 중임을 표시하고 있습니다.

이제 위의 예시 코드를 통해 Angular 폼에서 비동기 유효성 검사를 구현하는 방법을 살펴보았습니다.

자세한 내용은 Angular 공식 문서를 참고할 수 있습니다.