HTML5电子邮件验证和angular2一起工作吗？

我目前正在使用angular2进行验证.我在 HTML5电子邮件和网站验证器以及有效的ngModel属性方面存在一些问题.

例如：

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

我输入的每个单词都很好. #email.valid保持为true,就好像没有HTML5验证器一样：

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

因此表单的按钮始终处于启用状态.但是,当我点击按钮时,HTML警告出现说电子邮件字段无效,因此验证工作正常,但#email.valid它仍然是真的.

是否可以将angular2的ngModel指令与HTML5验证器一起使用？

解决方法

是的,你可以一起使用,你可以像这样使用它们

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