Angular - 电子邮件模式验证

Question

<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)$"/><br />

该模式要求电子邮件格式为“[email protected]”或“[email protected]”，但仍然允许提交不带“.com”或“.in”的内容。

Answer 1

对于模板驱动的表单，您应该在提交前使用

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

Answer 2

此电子邮件验证模式有几个问题，请尝试使用此模式：

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