Angular 4 为无效的电子邮件输入设置 ng-valid答案

【问题标题】：Angular 4 sets ng-valid for invalid email inputAngular 4 为无效的电子邮件输入设置 ng-valid
【发布时间】：2018-02-15 06:40:09
【问题描述】：

Angular 4 模板驱动的验证失败。这是一个已知问题，还是我的错误？

HTML：

<div class="form-group">
  <label for="email">Email</label>
  <input type="email" class="form-control" id="email" required 
    [(ngModel)]="model.email" name="email" #email="ngModel" #spy>

  <div>TODO remove: {{spy.className}}</div>
  <div [hidden]="email.valid || email.pristine" class="alert alert-danger">
    Valid email is required
  </div>
</div>

组件类具有以下属性： model = new SignupModel('','','','');

CSS：

input:invalid:not(.ng-pristine) {
    border-left: 5px solid #a94442; /* red */
}
input:valid:not(.ng-pristine) {
    border-left: 5px solid #42A948; /* green */
}

页面首次加载时，您可以看到电子邮件类名称：form-control ng-untouched ng-pristine ng-invalid 由于 email.pristine === true，警报消息被隐藏

当用户开始输入“aa”时，类名会发生变化：form-control ng-dirty ng-valid ng-touched 现在由于 email.valid === true，消息被隐藏但是，由于“aa”不是有效的电子邮件，左边框通过 css 显示为红色。

当 css 正确地将输入解释为无效时，为什么 Angular 会认为 email.valid 为 true 并设置 ng-valid 类？

当您删除“aa”时，样式类确实会更改为 ng-invalid，正确解释“必需”属性。

【问题讨论】：

标签： javascript html css angular validation

【解决方案1】：

解决方案是在输入标签中添加额外的“email”属性：

<input type="email" class="form-control" id="email" required email 
    [(ngModel)]="model.email" name="email" #email="ngModel">

【讨论】：