Javascript Angular 4设置ng对无效电子邮件输入有效

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

Html:

当页面首次加载时，您可以看到电子邮件类名：form control ng untouched ng pristine ng invalid 警报消息因电子邮件而隐藏。原始===true

当用户开始键入“aa”时，类名将更改：form control ng dirty ng valid ng touched 现在，邮件由于电子邮件而被隐藏。valid==true 但是，由于“aa”不是有效的电子邮件，因此左侧边框通过css显示为红色

为什么当CSS正确地将输入解释为无效时，角度考虑EMAIL？有效为真，并设置NG有效类？

---

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

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

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

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

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