バリデーションを実装するためには、次の手順に従います:
- フォームコントロールの作成: まず、バリデーションを適用するフォームフィールドごとにNgModelを使用してフォームコントロールを作成します。NgModelは、[(ngModel)]ディレクティブを使用してフォームフィールドとコンポーネントのプロパティをバインドします。
例えば、次のようなHTMLコードでフォームフィールドを作成します:
<input type="text" [(ngModel)]="name" name="name">- バリデーションルールの追加: 作成したフォームコントロールに対して、必要なバリデーションルールを追加します。Angularでは、バリデーションルールをValidatorsオブジェクトを使用して定義します。
例えば、次のようにValidators.requiredを使用して必須フィールドのバリデーションを行います:
import { Validators } from '@angular/forms';
...
name: FormControl = new FormControl('', Validators.required);- エラーメッセージの表示: バリデーションエラーが発生した場合、NgModelディレクティブは特定のCSSクラスをフォームフィールドに追加します。これを利用して、エラーメッセージを表示することができます。
例えば、次のように*ngIfディレクティブを使用してエラーメッセージを表示します:
<input type="text" [(ngModel)]="name" name="name">
<div *ngIf="name.errors?.required">名前を入力してください。</div>これで、NgModelを使用してAngularでのバリデーションを実装することができます。必要なバリデーションルールを追加し、エラーメッセージを表示することで、フォームのバリデーションを簡単に行うことができます。
この方法以外にも、NgModelを使用せずにリアクティブフォームを使用する方法や、カスタムバリデーションルールを作成する方法など、さまざまなバリデーションの方法があります。必要に応じて、これらの方法も調べてみてください。