HTML电子邮件验证和Angular 2一起工作吗?

elcex8rz  于 2023-01-28  发布在  Angular
关注(0)|答案(1)|浏览(135)

我目前正在使用Angular 2进行验证。我在HTML电子邮件和网站验证器以及valid ngModel的属性方面遇到了一些问题。
例如:

<form #form="ngForm">
    <input type="email" #email="ngModel" [(ngModel)]="contact.email" name="email" >
    <button [disabled]="!form.form.valid" type="submit">Btn</button>

i输入的每个单词都是正确的。#email.valid保持为真,就像不存在HTML5验证器一样:

{{#email.valid}} %%% true

所以表单的按钮一直处于启用状态,但是当我点击按钮时,HTML警告显示email字段无效,所以验证工作正常,但是#email.valid仍然是真的。
是否可以将angular2的ngModel指令与HTML验证器一起使用?

70gysomp

70gysomp1#

是的,您可以同时使用这两种方法,您可以像这样使用它们:

<input  id="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" class="form-control" type="email" ng-model="loginctrl.user.email" name="email" placeholder="Enter Email Address" required/>
<span ng-show="myForm.email.$touched && myForm.email.$error.required"><b class="color">This is a required field</b></span> <span ng-show=" myForm.$dirty && myForm.email.$invalid"><b class="color">This field is invalid</b></span>

相关问题