Reactive Formsにおける必須バリデーションの実装

テンプレート駆動フォーム (Template-driven Forms): テンプレート駆動フォームでは、フォームの要素に直接ディレクティブを適用してバリデーションを設定します。必須バリデーションを実装するには、required属性を使用します。以下は、テキスト入力フィールドの例です。

<input type="text" name="username" required>

リアクティブフォーム (Reactive Forms): リアクティブフォームでは、フォームの要素をコンポーネントのフォームモデルとバインドします。必須バリデーションを実装するには、フォームコントロールを作成し、Validators.requiredを使用します。以下は、テキスト入力フィールドの例です。

import { FormGroup, FormControl, Validators } from '@angular/forms';
// フォームグループの作成
const myForm = new FormGroup({
  username: new FormControl('', Validators.required)
});

カスタムバリデーションの作成: 必須バリデーションをカスタマイズする場合は、独自のバリデータ関数を作成することもできます。以下は、パスワードフィールドが入力されているかどうかを確認するカスタムバリデータの例です。

import { ValidatorFn, AbstractControl } from '@angular/forms';
// カスタムバリデータ関数の作成
function passwordRequired(): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } | null => {
    const password = control.value;
    if (!password || password.trim() === '') {
      return { 'passwordRequired': true };
    }
    return null;
  };
}
// フォームコントロールにカスタムバリデータを適用
const myForm = new FormGroup({
  password: new FormControl('', passwordRequired())
});