How to hide an error message when input is in focus?

Question

I am working with form validations in angular2 with ionic2. I want stop displaying the error message when a user is typing the invalid value and display the error message only when user clicks outside the input box.

form.html

<form>
<ion-input type="text" [(ngModel)]="username" name="username" #username="ngModel" required></ion-input>
<span *ngIf="username.touched && username.invalid && username.dirty">username is incorrect</span>
<form>

The abouve form displays error message when the user is typing number.I want to hide the error message when user is typing i.e input in focus and display the error message when user clicks outside the input field i.e out of focus.

How can I do this?

I am using Template driven form approach of angular2.

Answer 1

Based on this comment you could use a boolean flag, which you switch between true and false when the input field is in focus or not in focus.

So declare boolean, initially as false:

notFocused = false;

and use focus and focusout events to toggle your boolean:

<form #f="ngForm">
  <ion-input type="text" (focus)="notFocused=false" (focusout)="notFocused=true"  
     [(ngModel)]="username" name="userrname" #userrname="ngModel" required>
  </ion-input>
  <span *ngIf="userrname.invalid && notFocused">
     username is incorrect
  </span>
</form>

StackBlitz