以角度验证电子邮件模式

Posted 2023-02-22

【中文标题】以角度验证电子邮件模式

【英文标题】：validate email pattern in angular

【发布时间】：2021-02-16 02:41:10

【问题描述】：

如果用户输入无效的电子邮件格式，我试图阻止用户提交表单，我的问题是他可以输入文本并成功提交表单，即使它出现错误消息但仍然提交表单，我是不使用 formGroup 我的 html 代码：

<div class="form-group">
   <label for="fromEmail">From Email</label>
   <input type="email"  required name="fromEmail" #fromEmail="ngModel" id="fromEmail" 
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]2,3$" [(ngModel)]="currentForm.subscribers.subscriber[0].fromEmail" class="form-control" required minlength="1" maxlength="100" />
   <div class="color"  *ngIf="fromEmail.errors.required">Email is required</div>
   <div *ngIf="fromEmail.errors &&(fromEmail.touched || fromEmail.dirty)" class ="alert alert-danger">
      <div [hidden]="!fromEmail.errors?.pattern">
         Invalid pattern
      </div>
   </div>
</div>

【问题讨论】：

所以您需要在提交方法中添加验证。

感谢您的回复，请多解释或提供参考

【参考方案1】：

在 HTML 中调用方法并传递其中输入的值

<input value=" emailValidation(value)" type="text">
<p *ngIf ="!emailValidation()">ERROR BOX<p>

在 .TS 文件中创建一个自定义方法，它将验证电子邮件，保持布尔值，以便它可以根据电子邮件返回 true 和 false

   emailValidation(value) 
       // logic
     return true;
      

提交时

   <button  (click)="save()" [disabled]="!emailValidation()">Submit</button>

p.s 这不是最好的方法，它是一个伪代码，但你会明白的。

【讨论】：

可以添加代码吗？或您面临的问题。另外，请参阅我编辑过的代码

【参考方案2】：

我通常会为此使用响应式表单，因为它已经具有标准的电子邮件验证。但在你的情况下，我建议的是：

<div class="form-group">
   <label for="fromEmail">From Email</label>
   <input type="text" required name="fromEmail" ngModel #fromEmail="ngModel" id="fromEmail" 
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]2,3$" class="form-control" minlength="1" maxlength="100" />
   <div class="color"  *ngIf="fromEmail.errors.required">Email is required</div>
   <div *ngIf="fromEmail.errors &&(fromEmail.touched || fromEmail.dirty)" class ="alert alert-danger">
      <div [hidden]="!fromEmail.errors?.pattern">
         Invalid pattern
      </div>
   </div>
</div>