Solution is to add additional "email" attribute to input tag:
<input type="email" class="form-control" id="email" required email
[(ngModel)]="model.email" name="email" #email="ngModel">
On Thursday, August 31, 2017 at 11:13:28 AM UTC-7, Pavel Bosin wrote:
>
> Template driven validation fails.
>
> 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>
>
>
> Component class has property:
>
> 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 */
> }
>
>
> When page first loads, you can see email class names: form-control
> ng-untouched ng-pristine ng-invalid
>
> The message is hidden due to email.pristine === true
>
>
> When user starts typing "aa" the class names change: form-control ng-dirty
> ng-valid ng-touched
>
> Now the message is hidden due to email.valid === true
>
> However, since "aa" is not a valid email, the left border shows as red via
> css.
>
> Why does Angular consider email.valid to be true and sets ng-valid class?
>
>
> It does change to ng-invalid when you remove "aa", correctly interpreting
> "required" property.
>
>
>
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
