show error when mouseleave input

Question

In Angular4 how do I show error input text (for example input is required when mouseleave input ... when mouseleave input text error is showing and not when I am in input I show error).

My code:

<input type="email" class="form-control" name="email" placeholder="Enter email" [(ngModel)]="data.email" #dataemail="ngModel" required minlength="12" pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$" >
<div *ngIf="dataemail.errors?.pattern" class="alert alert-danger">Email is invalid</div>

Error showing in div.class="alert alert-danger" when I try to type text in input email but how do I show error when mouseleave input email.

Answer 1

You need to set the updateOn option to 'blur'. It will trigger the validation only after the user blurs the input.

<input 
  [(ngModel)]="data.email"
  [ngModelOptions]="{ updateOn: 'blur' }" <!-- add this -->
  type="email" 
  class="form-control"
  name="email" 
  placeholder="Enter email"
  #dataemail="ngModel" 
  required 
  minlength="12"
  pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$">
</div>
<div *ngIf="dataemail.errors?.pattern" class="alert alert-danger">
  Email is invalid
</div>

Live demo