Angular는 강력한 기능을 가진 폼 유효성 검사 시스템을 제공합니다. 하지만 기본 제공 에러 메시지는 경우에 따라 충분하지 않을 수 있습니다.

이때, Angular 폼에서 사용자 정의된 에러 메시지를 표시하고 싶다면 어떻게 해야 할까요?

이 블로그 게시물에서는 Angular 폼에서 사용자 정의 에러 메시지를 표시하는 방법을 알아보겠습니다.

1. 커스텀 에러 메시지 정의

먼저, 사용자 정의 에러 메시지를 정의해야 합니다. 에러 메시지는 폼 컨트롤의 에러 객체를 사용하여 정의됩니다.

예를 들어, 사용자 이름 필드에 대해 최소 길이가 3자여야 한다는 규칙을 설정하고 싶다면 다음과 같이 사용자 정의 에러 메시지를 정의할 수 있습니다.

const usernameErrors = {
    required: '사용자 이름은 필수 입력 항목입니다.',
    minlength: '사용자 이름은 최소 3자 이상이어야 합니다.'
};

2. 커스텀 에러 메시지 적용

다음으로, 컴포넌트 클래스에서 사용자 정의 에러 메시지를 적용해야 합니다. AbstractControl의 getError 메서드를 사용하여 해당 에러에 대한 사용자 정의 메시지를 반환합니다.

get usernameErrorMessage() {
    const errors = this.usernameControl.errors;
    if (errors) {
        for (const errorType in errors) {
            if (errors[errorType]) {
                return usernameErrors[errorType];
            }
        }
    }
    return '';
}

3. 템플릿에서 에러 메시지 출력

마지막으로, 템플릿에서 이 커스텀 에러 메시지를 출력합니다.

<div *ngIf="usernameControl.invalid && (usernameControl.dirty || usernameControl.touched)">
    <div *ngIf="usernameControl.errors">
        <div *ngIf="usernameErrorMessage">
            {{ usernameErrorMessage }}
        </div>
    </div>
</div>

이제 Angular 폼에서 사용자 정의된 에러 메시지가 정상적으로 표시됩니다.

위의 단계를 따라 하면, Angular의 폼 유효성 검사 시스템을 사용하면서 사용자 정의된 에러 메시지를 표시할 수 있습니다.

더 많은 정보는 Angular 공식 문서를 참조하시기 바랍니다.