В приложениях Angular проверка электронной почты является общим требованием, гарантирующим, что пользователи вводят действительные адреса электронной почты. В этой статье мы рассмотрим различные методы реализации шаблонов проверки электронной почты в Angular, а также примеры кода. К концу этого руководства вы получите четкое представление о различных подходах к проверке адресов электронной почты в ваших проектах Angular.

Методы проверки электронной почты в Angular:

1. Реактивные формы со встроенными валидаторами.
   Angular предоставляет набор встроенных валидаторов, которые можно использовать с реактивными формами для проверки ввода электронной почты. Вот пример использования валидатора Validators.email:

import { Component } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';
@Component({
  selector: 'app-email-validation',
  template: `
    <form [formGroup]="emailForm">
      <input type="email" formControlName="email" />
      <div *ngIf="emailForm.get('email').errors?.email">
        Invalid email address.
      </div>
    </form>
  `,
})
export class EmailValidationComponent {
  emailForm = this.formBuilder.group({
    email: ['', [Validators.required, Validators.email]],
  });
  constructor(private formBuilder: FormBuilder) {}
}

1. Формы на основе шаблонов.
   Если вы предпочитаете использовать формы на основе шаблонов в Angular, вы можете использовать директиву ngModelи атрибут HTML5 patternдля подтвердите ввод электронной почты. Вот пример:

<form #emailForm="ngForm">
  <input type="email" name="email" [(ngModel)]="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" required />
  <div *ngIf="emailForm.controls.email.invalid && (emailForm.controls.email.dirty || emailForm.controls.email.touched)">
    Invalid email address.
  </div>
</form>

1. Пользовательские валидаторы электронной почты.
   Если у вас есть особые требования к проверке, помимо встроенных валидаторов, вы можете создать собственные валидаторы. Вот пример пользовательской функции валидатора:

import { AbstractControl, ValidationErrors } from '@angular/forms';
export function customEmailValidator(control: AbstractControl): ValidationErrors | null {
  const emailPattern = /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/i;
  if (control.value && !emailPattern.test(control.value)) {
    return { invalidEmail: true };
  }
  return null;
}

Чтобы использовать собственный валидатор:

import { Component } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';
import { customEmailValidator } from './custom-email.validator';
@Component({
  selector: 'app-email-validation',
  template: `
    <form [formGroup]="emailForm">
      <input type="email" formControlName="email" />
      <div *ngIf="emailForm.get('email').errors?.invalidEmail">
        Invalid email address.
      </div>
    </form>
  `,
})
export class EmailValidationComponent {
  emailForm = this.formBuilder.group({
    email: ['', [Validators.required, customEmailValidator]],
  });
  constructor(private formBuilder: FormBuilder) {}
}

В этой статье мы рассмотрели различные методы проверки электронной почты в Angular. Мы рассмотрели использование встроенных валидаторов с реактивными формами, форм на основе шаблонов с атрибутом patternи пользовательских валидаторов. В зависимости от требований вашего проекта вы можете выбрать метод, который лучше всего соответствует вашим потребностям.