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

【问题标题】：Angular - Template driven form - Email validation not happeningAngular - 模板驱动的表单 - 电子邮件验证未发生
【发布时间】：2019-03-20 16:48:59
【问题描述】：

我正在制作一个简单的模板驱动表单，其中包含“电子邮件验证”（不是响应式表单）。因此，required、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 必须给出错误。

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

【问题讨论】：

标签： javascript angular forms

【解决方案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 上尝试这两种方法并使用更适合您的方法。

【讨论】：

是的，模式有效。但是为什么不喜欢'Reactive-Forms'只是生成error.email（我在使用响应式表单时看到了同样的情况——我们不需要给出模式。它提供错误只是作为errors.email而不给出模式）。
因为我们没有像您使用 required 那样使用 email 属性。我们正在使用pattern
是的，你是对的。仅添加“电子邮件”属性——将 abc.abc 验证为正确的电子邮件，这绝对是错误的。模式是更好的解决方案。 @saadMehmood 得到了一个很好的答案，但你的似乎更好，并且可以正确验证所有邮件。
我会非常谨慎地使用正则表达式模式来验证电子邮件，尤其是现在所有可用的新顶级域。例如，guy@met.museum 对于此处提供的示例正则表达式无效。

【解决方案2】：

替换这一行

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

与

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

【讨论】：

@Deadpool，为something@something 尝试这种方法，即使你使用它也是有效的。您是否接受对您的情况有效的电子邮件。如果是，当然，去这个？

【解决方案3】：

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

【讨论】：