Angular를 사용하여 웹 애플리케이션을 개발하다보면 사용자 지정 유효성 검사를 구현해야 할 때가 있습니다. Angular 폼 요소에서 사용자 정의 유효성 검사를 수행하고 에러 메시지를 표시하는 방법을 살펴보겠습니다.

사용자 지정 유효성 검사기 만들기

먼저, Angular에서 사용자 지정 유효성 검사기를 만들어 보겠습니다. 다음은 사용자 지정 유효성 검사기를 만드는 간단한 예제입니다.

import { Directive, Input } from '@angular/core';
import { NG_VALIDATORS, Validator, AbstractControl, ValidationErrors } from '@angular/forms';

@Directive({
  selector: '[appCustomValidator][ngModel]',
  providers: [{ provide: NG_VALIDATORS, useExisting: CustomValidatorDirective, multi: true }]
})
export class CustomValidatorDirective implements Validator {
  @Input('appCustomValidator') customValue: string;

  validate(control: AbstractControl): ValidationErrors | null {
    const value = control.value;
    if (value !== this.customValue) {
      return { customError: true };
    }
    return null;
  }
}

위 코드에서 CustomValidatorDirective는 Validator를 구현하여 사용자 지정 유효성 검사를 수행합니다. @Directive 데코레이터를 사용하여 지시문을 정의하고, NG_VALIDATORS를 제공자로 등록하여 Angular가 해당 지시문을 유효성 검사 프로세스에 참여시킵니다.

폼 요소에 사용자 정의 유효성 검사기 적용하기

다음으로, 위에서 만든 사용자 정의 유효성 검사기를 폼 요소에 적용하는 방법을 살펴보겠습니다. 예를 들어, 사용자 이름을 입력하는 폼이 있다고 가정해봅시다.

<input type="text" [(ngModel)]="userName" appCustomValidator [customValue]="'admin'">

위 코드에서 appCustomValidator는 사용자 정의 유효성 검사기를 폼 요소에 적용하는 지시자입니다. customValue는 사용자 지정 유효성 검사기에 필요한 매개변수로, 이 예제에서는 입력된 값이 ‘admin’인지를 확인하도록 지정되어 있습니다.

에러 메시지 표시하기

마지막으로, 유효성 검사 에러가 발생했을 때 에러 메시지를 표시하는 방법에 대해 살펴보겠습니다. 폼 요소에 에러 메시지를 표시하려면 해당 폼 요소와 연결된 AbstractControl의 errors 속성을 사용하여 유효성 검사 에러를 확인하고 처리할 수 있습니다.

<div *ngIf="userName.errors?.customError">사용자 이름이 유효하지 않습니다.</div>

위 코드에서 *ngIf 디렉티브를 사용하여 사용자 정의 유효성 검사 에러가 발생했을 때 에러 메시지를 표시합니다.

Angular를 사용하여 사용자 지정 유효성 검사를 쉽게 구현할 수 있으며, 이를 통해 폼 요소의 유효성을 더욱 세밀하게 제어할 수 있습니다.

참고: Angular 공식 문서 - 사용자 지정 유효성 검사기