バリデーションエラーを表示

フォームをバリデートできるようになったので、ユーザーにバリデーションエラーを表示することが重要です。

このアクティビティでは、次の方法を学びます:

バリデーションシグナルでフィールドの状態にアクセス
@if を使用してエラーを条件付きで表示
@for でエラーをループ
ユーザーの対話後にのみエラーを表示

バリデーションフィードバックを表示しましょう!

emailフィールドのエラー表示を追加

email入力の下に、条件付きエラー表示を追加します。これは、フィールドが無効でタッチ済みの両方である場合にのみエラーを表示します:
```
<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() は、カスタムメッセージを含むバリデーションエラーの配列を提供します。

passwordフィールドのエラー表示を追加

password入力の下に、passwordエラーの同じパターンを追加します:

<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>
}

すばらしい! フォームにエラー表示を追加しました。エラーは、ユーザーがフィールドと対話した後にのみ表示され、邪魔にならずに役立つフィードバックを提供します。

次に、フォーム送信の処理方法を学びます!

emailフィールドのエラー表示を追加

passwordフィールドのエラー表示を追加