Angular 4 sets ng-valid für ungültige E-Mail-Eingabe

Question

Angular 4 template driven validation schlägt fehl. Ist das ein bekanntes Problem oder mein Fehler?

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> 

Komponentenklasse Eigenschaft: Modell = 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 */ 
} 

Wenn Seite geladen wird, können Sie E-Mail-Klassennamen sehen: form Kontrolle ng-unangetastet ng-pristine ng-invalid Die Alarmmeldung wird aufgrund email.pristine versteckt == = true

Wenn Benutzer starten "aa" die Klassennamen eingeben ändern: form-control ng-dirty ng-valid ng-berührt Nun ist die Nachricht aufgrund email.valid versteckt === wahr da jedoch " aa "ist keine gültige E-Mail, der linke Rand wird über CSS rot dargestellt.

Warum hält Angular e-mail.valid für wahr und setzt die Klasse ng-valid, wenn die CSS die Eingabe als ungültig interpretiert?

Die Stilklasse ändert sich in ng-invalid, wenn Sie "aa" entfernen und die Eigenschaft "required" korrekt interpretieren.

Answer 1

Lösung ist zusätzlich "E-Mail" -Attribut auf Input-Tag hinzuzufügen:

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