Is there a known issue with Angular 4 template driven validation failing, or is it possibly a bug in my code?
Here is the HTML snippet:
<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>
The component class includes the property: model = new SignupModel('','','','');
Related CSS styles include:
input:invalid:not(.ng-pristine) {
border-left: 5px solid #a94442; /* red */
}
input:valid:not(.ng-pristine) {
border-left: 5px solid #42A948; /* green */
}
Upon initial page load, the email input has classes: form-control ng-untouched ng-pristine ng-invalid The alert message remains hidden because email.pristine === true
If a user starts typing "aa", the class names change to: form-control ng-dirty ng-valid ng-touched Now, the error message is no longer visible as email.valid === true, but the left border shows up as red due to invalid input.
Why does Angular mark email.valid as true and applies the ng-valid class, when the CSS correctly identifies the input as invalid?
The ng-invalid class is applied when the invalid input "aa" is removed, indicating that the "required" field is working correctly.