Angular Forms의 사용자 지정 유효성 검사

Angular 애플리케이션에서 견고한 Form 유효성 검사를 위해 사용자 지정 Validators를 구현하는 방법을 학습합니다.

사용자 지정 유효성 검사란 무엇인가요?

사용자 지정 Validators를 사용하면 required나 minlength와 같은 기본 제공 Validators를 넘어 직접 유효성 검사 로직을 정의할 수 있습니다.

사용자 지정 Validator 만들기

사용자 지정 Validator는 유효하면 null을, 유효하지 않으면 객체를 반환하는 간단한 함수입니다:

function forbiddenNameValidator(control: AbstractControl): { [key: string]: any } | null {
  return control.value === 'admin' ? { 'forbiddenName': true } : null;
}

Validator 적용하기

사용자 지정 Validator를 Form 컨트롤에 적용하세요:

this.myForm = new FormGroup({
  username: new FormControl('', [forbiddenNameValidator])
});

유효성 검사 오류 표시하기

유효성 검사 상태에 따라 템플릿에 오류 메시지를 조건부로 표시하세요:

<div *ngIf="myForm.get('username').hasError('forbiddenName')">
  Username 'admin' is not allowed.
</div>

Validator 지시문 사용하기

Validators를 템플릿 기반 Forms의 지시문으로 직접 사용할 수도 있습니다:

<input name="username" ngModel forbiddenName>

비동기 Validators

비동기 Validators를 사용하면 서버 확인과 같이 비동기 작업이 필요한 유효성 검사를 수행할 수 있습니다:

username: new FormControl('', null, [asyncValidator])

사용자 지정 Validators 테스트하기

다양한 상황과 예외적인 경우에도 Validators가 올바르게 동작하는지 항상 테스트하세요.

요약

Angular에서 견고한 Form 유효성 검사를 위해 사용자 지정 Validators를 만들고 적용하는 방법을 학습하셨습니다. 훌륭합니다!