Angular4中如何在鼠标离开输入框时显示输入错误信息

这个需求其实很好实现，核心就是结合Angular表单控件的状态和输入框的聚焦/失焦事件，精准控制错误提示的显示时机。下面一步步给你拆解：

步骤1：在组件类中添加聚焦状态变量 #

首先在你的组件.ts文件里，定义一个变量来跟踪输入框是否处于聚焦状态：

export class YourComponent {
  data = { email: '' };
  isEmailFocused = false; // 用来标记输入框是否聚焦
}

步骤2：给输入框绑定聚焦和失焦事件 #

修改你的输入框模板，添加focus和blur事件绑定，实时更新上面的状态变量：

<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})+$"
  (focus)="isEmailFocused = true"  <!-- 聚焦时把状态设为true -->
  (blur)="isEmailFocused = false"   <!-- 失焦时把状态设为false -->
>

步骤3：修改错误提示的显示条件 #

现在调整错误提示的*ngIf条件，需要同时满足三个要求：

• 输入框已经被用户触碰过（dataemail.touched，即用户已经离开过输入框一次）
• 存在对应的验证错误（比如dataemail.errors?.pattern）
• 当前输入框没有处于聚焦状态（!isEmailFocused）

完整的错误提示代码如下：

<!-- 必填项错误提示 -->
<div *ngIf="dataemail.touched && dataemail.errors?.required && !isEmailFocused" class="alert alert-danger">
  Email is required
</div>

<!-- 格式错误提示 -->
<div *ngIf="dataemail.touched && dataemail.errors?.pattern && !isEmailFocused" class="alert alert-danger">
  Email is invalid
</div>

<!-- 长度不足错误提示 -->
<div *ngIf="dataemail.touched && dataemail.errors?.minlength && !isEmailFocused" class="alert alert-danger">
  Email must be at least 12 characters long
</div>

逻辑说明 #

• dataemail.touched：确保用户已经和输入框交互过（点击后离开），避免页面刚加载就弹出错误提示，影响体验
• isEmailFocused：控制用户正在输入时（聚焦状态）隐藏错误，让用户可以安心输入，不用被错误信息干扰
• dataemail.errors?.xxx：精准判断具体的验证错误类型，对应显示不同的提示文本

这样就能完美实现你要的效果：鼠标离开输入框时显示验证错误，聚焦输入框时自动隐藏错误~

内容的提问来源于stack exchange，提问作者qfarawi55