[angular] Angular 폼 인라인 에러 메시지

26 Dec 2023

angular

Angular를 사용하여 웹 애플리케이션을 개발할 때 폼의 유효성 검사와 에러 메시지 표시는 중요한 요소입니다. 이 글에서는 Angular 프레임워크에서 폼 요소의 인라인 에러 메시지를 표시하는 방법에 대해 알아보겠습니다.

폼 유효성 검사와 에러 메시지 표시

Angular에서 폼의 유효성 검사는 ReactiveFormsModule 또는 FormsModule를 사용하여 쉽게 구현할 수 있습니다. 사용자가 입력한 내용이 유효하지 않을 때 적절한 에러 메시지를 표시하는 것은 사용자 경험을 향상시키는 데 도움이 됩니다.

폼 인라인 에러 메시지

폼 요소의 인라인 에러 메시지는 해당 입력 필드 근처에 동적으로 표시됩니다. Angular를 사용하면 FormGroup, FormControl 및 NgForm 디렉티브를 이용하여 이를 구현할 수 있습니다.

다음은 Angular에서 폼 요소의 인라인 에러 메시지를 표시하는 간단한 예제입니다.

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

@Component({
  selector: 'app-my-form',
  template: `
    <form [formGroup]="myForm" novalidate>
      <input type="text" formControlName="username" />
      <div *ngIf="myForm.get('username').invalid && (myForm.get('username').dirty || myForm.get('username').touched)">
        <div *ngIf="myForm.get('username').errors.required">사용자 이름을 입력하세요.</div>
        <div *ngIf="myForm.get('username').errors.minlength">사용자 이름은 최소 3자 이상이어야 합니다.</div>
      </div>
    </form>
  `,
})
export class MyFormComponent {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      username: ['', [Validators.required, Validators.minLength(3)]],
    });
  }
}

위의 예제에서 *ngIf 디렉티브를 사용하여 폼 요소의 유효성 상태에 따라 인라인으로 에러 메시지를 표시하고 있습니다.

결론

Angular를 사용하여 폼 요소의 인라인 에러 메시지는 사용자 친화적인 웹 애플리케이션을 개발하는 데 도움이 됩니다. Angular의 폼 관련 디렉티브를 적절히 활용하여 유효성 검사 및 에러 메시지 표시를 구현할 수 있습니다.

참고: Angular Reactive Forms 공식 문서