Angular - 基于模板的表单 - 电子邮件验证未生效

Question

我正在制作一个简单的模板驱动表单，并在其中添加了“电子邮件验证”（而不是响应式表单）。所以，必填项、最小长度和最大长度都可以正常工作。但是，当我尝试让电子邮件有效时，它失败了。有人能帮帮我吗？

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>

注意: 虽然对电子邮件进行了必要的验证，但由于输入的模式或数据不正确，电子邮件验证区域的第二个验证必须给出错误提示。

结果: (电子邮件有效，但其模式未自动出错)

- Deadpool

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>

在这个示例StackBlitz上尝试两种方法，并使用适合您的那一种。

- SiddAjmera

---

是的，模式有效。但为什么不像“响应式表单”一样只生成错误.email（我在使用响应式表单时看到了同样的情况--我们不需要提供模式。它只是提供错误，而不给出模式）。 - Deadpool

因为我们没有像您使用“required”一样使用“email”属性。我们正在使用“pattern”。 - SiddAjmera

是的，你是对的。只添加“email”属性——将abc.abc验证为正确的电子邮件地址是绝对错误的。正则表达式是更好的解决方案。@saadMehmood 给出了一个很好的答案，但是你的答案似乎更好，并可以正确验证所有电子邮件地址。 - Deadpool

我会非常谨慎地使用正则表达式模式来验证电子邮件地址，特别是在现今这么多新的顶级域名可用的情况下。例如，[e-mail] 使用这里提供的示例正则表达式将不被视为有效。 - circleofconfusion

Answer 2

更改此行

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

随着

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

- Saad Mehmood

---

@Deadpool，尝试使用这种方法来处理something@something，即使您使用它也是有效的。如果您接受此类电子邮件作为有效，请选择此选项？ - SiddAjmera

Answer 3

在输入标签中使用“pattern = regex”，并使用验证电子邮件?.errors?.pattern

- Geetanshu Gulati