유효성 검사 오류 표시하기

이제 폼의 유효성을 검사할 수 있으므로, 사용자에게 유효성 검사 오류를 표시해야 합니다.

이번 실습에서는 다음 내용을 배웁니다:

• 유효성 검사 시그널로 필드 상태에 접근하기
• @if로 조건에 따라 오류 표시하기
• @for로 오류 목록 순회하기
• 사용자가 상호작용한 후에만 오류 표시하기

유효성 검사 결과를 표시해 봅시다!

1. 이메일 필드에 오류 표시 추가하기

   이메일 입력 엘리먼트 아래에 조건부 오류 표시를 추가합니다. 필드가 유효하지 않으면서 touched 상태일 때만 오류가 표시됩니다:

   <label>
     Email
     <input type="email" [formField]="loginForm.email" />
   </label>
   @if (loginForm.email().invalid() && loginForm.email().touched()) {
     <div class="error">
       @for (error of loginForm.email().errors(); track error.kind) {
         <span>{{ error.message }}</span>
       }
     </div>
   }

   loginForm.email()을 호출하면 필드의 상태 시그널에 접근합니다. invalid()는 유효성 검사에 실패했을 때 true를 반환하고, touched()는 사용자가 필드와 상호작용한 후 true를 반환합니다. errors()는 커스텀 메시지가 포함된 유효성 검사 오류 배열을 제공합니다.

2. 비밀번호 필드에 오류 표시 추가하기

   비밀번호 입력 엘리먼트 아래에도 같은 방식으로 비밀번호 오류 표시를 추가합니다:

   <label>
     Password
     <input type="password" [formField]="loginForm.password" />
   </label>
   @if (loginForm.password().invalid() && loginForm.password().touched()) {
     <div class="error">
       @for (error of loginForm.password().errors(); track error.kind) {
         <span>{{ error.message }}</span>
       }
     </div>
   }

폼에 오류 표시를 추가했습니다! 사용자가 필드와 상호작용한 후에만 오류가 나타나므로, 입력을 방해하지 않으면서 필요한 안내를 제공합니다.

다음 단계에서는 폼 제출을 처리하는 방법을 배웁니다!