验证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文件制作了一个自定义方法，它将验证电子邮件，保持其布尔值，以便根据电子邮件返回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>