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

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

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
  selector: 'app-email-validation',
  templateUrl: './email-validation.component.html',
  styleUrls: ['./email-validation.component.css']
})
export class EmailValidationComponent implements OnInit {
  emailForm: FormGroup;
  constructor(private formBuilder: FormBuilder) { }
  ngOnInit() {
    this.emailForm = this.formBuilder.group({
      email: ['', [Validators.required, Validators.email]]
    });
  }
  onSubmit() {
    if (this.emailForm.valid) {
      // Perform further actions
    }
  }
}

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

import { AbstractControl, ValidatorFn } from '@angular/forms';
export function emailValidator(): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } | null => {
    const emailRegex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
    const valid = emailRegex.test(control.value);
    return valid ? null : { invalidEmail: true };
  };
}

Чтобы использовать этот пользовательский валидатор, обновите определение элемента управления формы следующим образом:

email: ['', [Validators.required, emailValidator()]]

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

import { AbstractControl, AsyncValidatorFn } from '@angular/forms';
import { Observable, of } from 'rxjs';
import { delay, map } from 'rxjs/operators';
export function emailAvailabilityValidator(): AsyncValidatorFn {
  return (control: AbstractControl): Observable<{ [key: string]: any } | null> => {
    // Simulating async check
    return of(null).pipe(
      delay(1000),
      map(() => {
        const emailExists = /* Check email existence in database */;
        return emailExists ? { emailTaken: true } : null;
      })
    );
  };
}

Чтобы применить этот асинхронный валидатор к элементу управления формой, используйте следующий синтаксис:

email: ['', [Validators.required, Validators.email], [emailAvailabilityValidator()]]

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

Не забудьте выбрать тот подход проверки, который лучше всего соответствует вашим конкретным требованиям. Удачного программирования с Angular!