html - HTML5 电子邮件验证和 angular2 一起工作吗?

标签 html angular html5-validation

我目前正在使用 angular2 进行验证。我在使用 HTML5 电子邮件和网站验证器以及 valid 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 保持为真,就好像不存在 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>

关于html - HTML5 电子邮件验证和 angular2 一起工作吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38719112/

相关文章:

angular - 设置值后不显示自动完成

html5-validation - 单击按钮时手动触发 html5 验证

python - 如何从渲染模板中的mysql查询结果正确返回或显示多行到html

html - 覆盖 PrimeNG 组件 CSS

javascript - Slick 插件在我的网站上看起来很奇怪。有人知道修复方法吗?

javascript - Polymer 2.0 通过 Id 访问嵌套模板内部的元素

angular - ionic 3 - FileTransfer 无法下载文件

angular - 如何在 Angular 的 http GET 请求中传递多个参数?

visual-studio-2013 - 使用 Angular UI Bootstrap 避免 Visual Studio 验证错误

html - &nbsp 导致 HTML5 验证失败