我正在制作一个简单的模板驱动表单,并在其中添加了“电子邮件验证”(而不是响应式表单)。所以,必填项、最小长度和最大长度都可以正常工作。但是,当我尝试让电子邮件有效时,它失败了。有人能帮帮我吗?
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>
注意: 虽然对电子邮件进行了必要的验证,但由于输入的模式或数据不正确,电子邮件验证区域的第二个验证必须给出错误提示。
结果: (电子邮件有效,但其模式未自动出错)