Angular-模板驱动的表单-电子邮件验证未发生

Question

我正在制作一个简单的模板驱动表单，其中包含“电子邮件验证”（不是通过响应表单）。因此，必需的minlength和maxlength都可以正常工作。但是，当我尝试使电子邮件有效时，它会失败。有人可以帮我吗？

abc.component.html

  <form #customForm="ngForm" (ngSubmit)="alpha(customForm)">

    <input type="text" name="firstName" ngModel #firstName ="ngModel" required minlength="3" maxlength="10"><br/>

    <div *ngIf="firstName.touched">
      <p *ngIf="firstName.errors?.required">First Name is Required!!!</p>
      <p *ngIf="firstName.errors?.minlength">First Name minimum 3 characters are required!!!</p>
      <p *ngIf="firstName.errors?.maxlength">First Name max length is 10!!!</p>
    </div>

    <input type="email" name="email" ngModel #email="ngModel" required><br/>

    <div *ngIf="email.touched">
      <p *ngIf="email.errors?.required">Email is a required field!</p>
      <p *ngIf="email.errors?.email">This is not a valid Email!!!</p>
    </div>

    <button type="submit" [disabled]="customForm.invalid">Submit</button>

  </form>

  

注意：尽管正在对电子邮件进行必要的验证，但由于   输入的格式或数据不正确，请在电子邮件中 第二次验证   验证div必须给出错误。

结果：（电子邮件有效，其模式不会自动给出错误）

Answer 1

您可以在电子邮件输入中添加一个email属性。但这不会使模式xxx@xxx无效，我认为这对您而言不是有效的电子邮件。

我建议您改用pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$"。然后，在显示错误消息的位置，应改为检查email.errors?.pattern。

尝试一下：

<input 
  type="email" 
  name="email" 
  ngModel 
  #email="ngModel" 
  pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" 
  required>
<br/>

<div *ngIf="email.touched">
  <p *ngIf="email.errors?.required">Email is a required field!</p>
  <p *ngIf="email.errors?.pattern">This is not a valid Email!!!</p>
</div>

在此Sample StackBlitz上尝试两种方法，并使用更适合您的方法。

Answer 2

替换此行

<input type="email" name="email" ngModel #email="ngModel" required>

使用

<input type="email" name="email" ngModel #email="ngModel" required email>// add email attribute

Answer 3

在输入代码中使用“ pattern = regrex”，并使用验证电子邮件？.errors..pattern