javascript - Angular 4 设置 ng-valid 来处理无效的电子邮件输入

Question

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>

组件类具有属性: 模型 = 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，从而正确解释“required”属性。

Answer 1

解决方案是向输入标记添加额外的“电子邮件”属性:

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