リアクティブフォームで空白文字のバリデーションチェックをする[Angular]

はじめに
実装方法
1. コンポーネントの作成
  1. 空白文字チェックのバリデーションを自作
  2. 自作したバリデーション機能をFormControlに設定
2. テンプレート側でエラーを確認する方法
まとめ

はじめに

リアクティブフォームのValidation機能で、カスタマイズできる機能を使って、フォームの入力値が空白文字だけの場合、エラーにするようにします。

実装方法

Angulalr 18で実装していきます。

コンポーネントの作成

空白文字チェックのバリデーションを自作

まず、カスタマイズしたバリデーション機能を作ります。

export function nonEmptyValidator(): ValidatorFn {
    return (control: AbstractControl): ValidationErrors | null => {
      const isValid = control.value && control.value.trim().length === 0;
      return isValid ? {nonEmpty: {value: control.value}} : null;
    };
}

ValidatorFnを自作することで、バリデーションをカスタマイズできます。

returnで、ValidationErrorsオブジェクトを返した場合、エラーとなります。
エラーのキーはnonEmptyと設定しています。

自作したバリデーション機能をFormControlに設定

以下のように、自作したバリデーション関数をFormGroupなどで作成するときに、引数として渡すことで、バリデーションを追加できます。

  constructor(private fb: FormBuilder) {
    this.createForm();
  }

  createForm() {
    this.loginForm = this.fb.group({
      email: ['', [Validators.required, nonEmptyValidator()]],
      password: ['', [Validators.required, nonEmptyValidator()]]
    });
  }

テンプレート側でエラーを確認する方法

以下のように、自作したときに、nonEmptyというキーを設定したので、その値で組み込みバリデーションと同じように、参照することができます。

@if (loginForm.get('email')?.errors?.['nonEmpty']) {
  <span>emailの空白文字のみの入力は禁止です</span>
}

対応方法としては、以上になります。

まとめ

空白文字のチェックに限らず、バリデーションは自作して設定することができるため、組み込みのバリデーションにないものは、自作していきましょう。