Angularフォームのカスタムバリデーション

Angularアプリケーションで堅牢なフォームバリデーションを実装するために、カスタムValidatorsを作成する方法を学びます。

カスタムバリデーションとは

カスタムValidatorsを使うと、requiredやminlengthなどの組み込みValidatorsでは対応できない独自の検証ロジックを定義できます。

カスタムValidatorの作成

カスタムValidatorは、入力が有効な場合はnullを、無効な場合はオブジェクトを返すシンプルな関数です。

function forbiddenNameValidator(control: AbstractControl): { [key: string]: any } | null {
  return control.value === 'admin' ? { 'forbiddenName': true } : null;
}

Validatorの適用

フォームコントロールにカスタムValidatorを適用します。

this.myForm = new FormGroup({
  username: new FormControl('', [forbiddenNameValidator])
});

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

バリデーションの状態に応じて、テンプレートにエラーメッセージを条件付きで表示します。

<div *ngIf="myForm.get('username').hasError('forbiddenName')">
  Username 'admin' is not allowed.
</div>

Validatorディレクティブの使用

Validatorsは、テンプレート駆動フォームのディレクティブとして直接使用することもできます。

<input name="username" ngModel forbiddenName>

非同期Validators

非同期Validatorsを使うと、サーバーによる確認など、非同期処理を伴う検証を実行できます。

username: new FormControl('', null, [asyncValidator])

カスタムValidatorsのテスト

さまざまな状況やエッジケースでも正しく動作することを確認するため、Validatorsは必ずテストしてください。

まとめ

Angularで堅牢なフォームバリデーションを実現するために、カスタムValidatorsを作成して適用する方法を学びました。すばらしい成果です。