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

新手上路,请多包涵

我正在制作一个简单的模板驱动表单,其中包含“电子邮件验证”(不是通过反应式表单)。因此,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 中 的第二次验证 必须给出错误。

结果:( 电子邮件有效且其模式不会自动给出错误)

在此处输入图像描述

原文由 Deadpool 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 327
2 个回答

您可以将 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 发布,翻译遵循 CC BY-SA 4.0 许可协议

替换这一行

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

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

原文由 Saad Mehmood 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题