输入焦点时如何隐藏错误消息？

Question

我正在使用 ionic2 在 angular2 中进行表单验证。我想在用户键入无效值时停止显示错误消息，仅当用户在输入框外单击时才显示错误消息。

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>

上面的表单在用户键入时显示错误消息 number.I 想在用户键入时隐藏错误消息，即在焦点输入时显示错误消息，当用户在输入字段外单击时显示错误消息，即在重点.

我该怎么做？

我正在使用 angular2 的模板驱动表单方法。

Answer 1

基于这个 comment 你可以使用一个布尔标志，当输入字段是对焦或不对焦。

所以声明布尔值，最初为 false:

notFocused = false;

并使用 focus 和 focusout 事件来切换您的布尔值：

<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

输入焦点时如何隐藏错误消息？

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

angular2-forms

angular