Angular를 사용하여 폼을 구현할 때 유효성 검사는 매우 중요합니다. 사용자에게 알맞은 정보를 제공하고, 정확한 데이터를 수집하는 데 있어서 필수적인 부분이기 때문입니다. Angular 폼 유효성 검사 메시지는 이러한 사용자 경험을 향상시키고, 사용자가 올바른 데이터를 입력하도록 유도합니다.

Angular 폼 유효성 검사

Angular에서 폼 유효성 검사를 수행하려면 다음과 같은 방법을 이용할 수 있습니다.

this.form = this.formBuilder.group({
  username: ['', Validators.required],
  email: ['', [Validators.required, Validators.email]],
  password: ['', Validators.required]
});

위 코드에서 Validators 클래스를 사용하여 유효성을 정의하고, 폼을 생성합니다. 이후에는 HTML 템플릿에서 formControlName을 이용하여 각 입력 필드에 해당하는 유효성 검사 메시지를 표시합니다.

유효성 검사 메시지 표시

Angular에서 유효성 검사 메시지를 표시하기 위해서는 FormGroup의 controls 프로퍼티에서 유효성 상태를 확인하고, 이에 따라 메시지를 표시할 수 있습니다.

<div *ngIf="form.get('username').hasError('required') && form.get('username').touched">
  사용자 이름을 입력하세요.
</div>
<div *ngIf="form.get('email').hasError('required') && form.get('email').touched">
  이메일을 입력하세요.
</div>
<div *ngIf="form.get('email').hasError('email') && form.get('email').touched">
  올바른 이메일 주소를 입력하세요.
</div>
<div *ngIf="form.get('password').hasError('required') && form.get('password').touched">
  비밀번호를 입력하세요.
</div>

위 코드는 각 입력 필드에 해당하는 유효성 검사 메시지를 템플릿에서 표시하는 예시입니다. 각 필드의 유효성 상태와 터치 여부를 확인하여 메시지를 동적으로 표시합니다.

이 외에도 사용자 정의 디렉티브나 서비스를 활용하여 유효성 검사 메시지를 보다 쉽게 관리할 수도 있습니다. Angular Material을 사용하는 경우, 해당 라이브러리에서 제공하는 ErrorStateMatcher 등을 이용하여 유효성 검사 메시지를 보다 효과적으로 관리할 수 있습니다.

Angular에서 폼 유효성 검사와 관련된 자세한 내용은 Angular 공식 문서를 참조하시기 바랍니다.