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>

当用户输入数字时，abouve表单会显示错误消息。我想在用户键入时隐藏错误消息，即输入焦点并在用户点击输入字段外显示错误消息，即失焦。

我该怎么做？

我正在使用angular2的模板驱动形式方法。

Answer 1

根据此 comment ，您可以使用布尔标志，当输入字段处于焦点或不处于焦点时，您可以在true和false之间切换对焦。

声明boolean，最初为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

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

1 个答案: