Angular邮箱正则验证问题：指定格式规则下仍允许无后缀邮箱提交

你的代码出现验证失效的核心原因有两个：

1. 当<input>类型设为email时，Angular会启用内置邮箱验证器，它的规则比你自定义的pattern宽松——比如允许test@test这种无顶级域名后缀的格式，只要符合@分隔的基本结构就会通过验证。
2. 模板驱动表单中，若未明确绑定控件验证状态并在提交时校验，可能导致自定义pattern的验证逻辑未被正确触发。

解决方法一：改用text类型输入框（最简单） #

把type="email"改成type="text"，彻底禁用Angular内置的邮箱验证，只使用你定义的pattern规则：

<label for="userEmail">User Email:</label><br />
<input type="text" class="userMobile" id="userEmail" name="userEmail"
  [(ngModel)]="selectedLocker.lockeruseremail" required 
  pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.(com|in)$"
  #userEmail="ngModel"/><br />
<!-- 添加错误提示，提升用户体验 -->
<div *ngIf="userEmail.invalid && (userEmail.dirty || userEmail.touched)">
  <div *ngIf="userEmail.errors?.['required']">邮箱不能为空</div>
  <div *ngIf="userEmail.errors?.['pattern']">请输入后缀为.com或.in的合法邮箱</div>
</div>

同时在提交表单时，要校验表单或控件的有效性：

<form #emailForm="ngForm" (ngSubmit)="onSubmit(emailForm)">
  <!-- 上面的输入框代码 -->
  <button type="submit" [disabled]="emailForm.invalid">提交</button>
</form>

组件内的提交逻辑：

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

// ...

onSubmit(form: NgForm) {
  if (form.invalid) {
    return; // 验证不通过时终止提交
  }
  // 执行你的提交逻辑
}

解决方法二：保留email类型，用响应式表单强化验证（推荐） #

响应式表单能更精准地控制验证规则，避免内置验证和自定义规则的冲突：

1. 组件内初始化表单并添加验证器：

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

export class YourComponent {
  lockerForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.lockerForm = this.fb.group({
      userEmail: ['', [
        Validators.required,
        // 添加大小写不敏感修饰符`i`，支持大写邮箱后缀
        Validators.pattern(/^[a-z0-9._%+-]+@[a-z0-9.-]+\.(com|in)$/i)
      ]]
    });
  }

  onSubmit() {
    if (this.lockerForm.invalid) {
      this.lockerForm.markAllAsTouched(); // 标记所有控件为已触摸，显示错误提示
      return;
    }
    // 读取表单值并执行提交逻辑
    this.selectedLocker.lockeruseremail = this.lockerForm.value.userEmail;
    // ...
  }
}

2. 模板中绑定响应式表单：

<form [formGroup]="lockerForm" (ngSubmit)="onSubmit()">
  <label for="userEmail">User Email:</label><br />
  <input type="email" class="userMobile" id="userEmail" name="userEmail"
    formControlName="userEmail"/><br />
  <!-- 错误提示 -->
  <div *ngIf="lockerForm.get('userEmail')?.invalid && (lockerForm.get('userEmail')?.dirty || lockerForm.get('userEmail')?.touched)">
    <div *ngIf="lockerForm.get('userEmail')?.errors?.['required']">邮箱不能为空</div>
    <div *ngIf="lockerForm.get('userEmail')?.errors?.['pattern']">请输入后缀为.com或.in的合法邮箱</div>
  </div>
  <button type="submit" [disabled]="lockerForm.invalid">提交</button>
</form>

额外优化：修正正则表达式 #

你的原正则只支持小写字母，添加i修饰符可以支持大小写（比如TEST@EXAMPLE.COM），用正则字面量写法更直观：

/^[a-z0-9._%+-]+@[a-z0-9.-]+\.(com|in)$/i

内容的提问来源于stack exchange，提问作者Vinutha K Shetty