В Angular вы можете реализовать проверку шаблона различными способами в зависимости от ваших конкретных требований. Вот некоторые распространенные методы:

1. Формы на основе шаблонов. Если вы используете формы на основе шаблонов, вы можете использовать встроенный валидатор шаблонов, добавив атрибут «шаблон» к элементам ввода формы. Например:

<input type="text" name="email" pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$" ngModel>

2. Реактивные формы. Если вы используете реактивные формы, вы можете использовать метод Validators.pattern(), чтобы определить проверку шаблона для элементов управления вашей формы. Вот пример:

import { Validators, FormControl } from '@angular/forms';
const emailFormControl = new FormControl('', [
  Validators.required,
  Validators.pattern('[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$')
]);

3. Пользовательская директива. Другой подход — создать пользовательскую директиву, которая инкапсулирует логику проверки шаблона. Это позволяет повторно использовать проверку для нескольких элементов управления формой. Вот пример базовой пользовательской директивы для проверки шаблона:

import { Directive, Input } from '@angular/core';
import { NG_VALIDATORS, Validator, FormControl } from '@angular/forms';
@Directive({
  selector: '[appPatternValidator]',
  providers: [{
    provide: NG_VALIDATORS,
    useExisting: PatternValidatorDirective,
    multi: true
  }]
})
export class PatternValidatorDirective implements Validator {
  @Input('appPatternValidator') pattern: string;
  validate(control: FormControl): { [key: string]: any } | null {
    const regex = new RegExp(this.pattern);
    const valid = regex.test(control.value);
    return valid ? null : { pattern: true };
  }
}

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

<input type="text" name="email" [(ngModel)]="email" appPatternValidator="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$">