在 angular 中验证电子邮件模式

Question

我试图阻止用户在输入无效的电子邮件格式时提交表单，我的问题是他可以输入文本并成功提交表单，即使出现错误提示但仍然提交表单，我没有使用 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>

Answer 1

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

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

在 .TS 文件中创建一个自定义方法，它将验证电子邮件，将其保留为布尔值，以便它可以 return 根据电子邮件

判断真假

   emailValidation(value) {
       // logic
     return true;
      }

提交时

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

p.s 这不是最好的方法，它是一个 pseudo-code 但你会明白的。

Answer 2

我通常会为此使用反应式表单，因为它已经有了标准的 e-mail 验证。但在你的情况下，我的建议是：

<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>

在 angular 中验证电子邮件模式

validate email pattern in angular

angular

forms

validation

email-validation