Проверка шаблона электронной почты в Angular

Этот шаблон проверки электронной почты имеет несколько проблем. Попробуйте использовать этот шаблон:

^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$

Для формы, основанной на шаблоне, вы должны использовать form.valid, чтобы проверить, что форма действительна перед отправкой. И примените атрибут [disabled], чтобы заблокировать отправку кнопки.

import { ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';

@ViewChild('form') form!: NgForm;

submit() {
  if (!this.form.valid) {
    alert('Form value invalid Detected!')
    return;
  }

  ...
}

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

<form #form = "ngForm" (submit) = "submit()">
  <label for = "userEmail">User Email:</label><br />
  <input
    type = "email"
    class = "userMobile"
    id = "userEmail"
    name = "userEmail"
    [(ngModel)] = "selectedLocker.lockeruseremail"
    required
    pattern = "[a-z0-9._%+-]+@[a-z0-9.-]+\.(com|in)$"
    #email = "ngModel"
  /><br />
  <ng-container *ngIf = "email.errors?.pattern">
    Invalid email pattern.
  </ng-container>

  <button [disabled] = "!form.form.valid">Submit</button>
</form>

Демо @ StackBlitz