Angularでのメールアドレスのバリデーション方法

まず、Angularの標準のフォームバリデーションを使用してメールアドレスのバリデーションを行う方法を紹介します。以下のコード例を参考にしてください。

<input type="email" name="email" [(ngModel)]="email" required>
<div *ngIf="email.invalid && (email.dirty || email.touched)">
  <div *ngIf="email.errors.required">
    メールアドレスを入力してください。
  </div>
  <div *ngIf="email.errors.email">
    正しい形式のメールアドレスを入力してください。
  </div>
</div>

上記のコードでは、<input>要素のtype属性をemailに設定し、name属性と[(ngModel)]ディレクティブを使用してフォームコントロールとのバインディングを行っています。また、required属性も指定しています。

<div>要素内で、email.invalidプロパティとemail.dirty、email.touchedを組み合わせてバリデーションエラーメッセージを表示しています。email.errors.requiredは、必須フィールドのエラーメッセージを表示するための条件文です。email.errors.emailは、正しい形式のメールアドレスが入力されていない場合のエラーメッセージを表示するための条件文です。

次に、カスタムバリデーションディレクティブを使用してメールアドレスのバリデーションを行う方法を紹介します。以下のコード例を参考にしてください。

import { Directive } from '@angular/core';
import { NG_VALIDATORS, Validator, AbstractControl } from '@angular/forms';
@Directive({
  selector: '[emailValidator]',
  providers: [
    {
      provide: NG_VALIDATORS,
      useExisting: EmailValidatorDirective,
      multi: true
    }
  ]
})
export class EmailValidatorDirective implements Validator {
  validate(control: AbstractControl): { [key: string]: any } | null {
    const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    const valid = emailRegex.test(control.value);
    return valid ? null : { invalidEmail: true };
  }
}

上記のコードでは、EmailValidatorDirectiveというカスタムバリデーションディレクティブを作成しています。validateメソッド内で、正規表現を使用してメールアドレスの形式をバリデーションしています。正しい形式でない場合は、{ invalidEmail: true }というエラーオブジェクトを返します。

このカスタムバリデーションディレクティブを使用するには、以下のようにフォームコントロールにemailValidator属性を追加します。

<input type="text" name="email" [(ngModel)]="email" required emailValidator>

これで、Angularでのメールアドレスのバリデーションを実装する方法が分かりました。以上の方法を使用することで、ユーザーが正しい形式のメールアドレスを入力しているかどうかを簡単に確認できます。