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文件中创建一个自定义方法，它将验证电子邮件，并将其保留为布尔值，以便它可以根据电子邮件返回true和false

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

提交时

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

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

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

验证角度的电子邮件模式

2 个答案: