Angular表单验证：触发change验证后延迟显示错误消息

方案一：仅在控件失焦时显示错误消息 #

直接修改错误消息的*ngIf条件，去掉dirty判断，只保留touched状态：

<inm-validation-message
  class="validation-container"
  *ngIf="control && control.invalid && control.touched"
  [control]="control">
</inm-validation-message>

逻辑说明：

• 保持表单验证触发时机为change，用户输入时控件的valid状态会实时更新，提交按钮能及时根据表单有效性启用/禁用。
• 错误消息仅在控件失焦（touched为true）且验证失败时才显示，避免用户输入过程中过早弹出错误提示。

方案二：延迟显示错误消息（用户停止输入后再提示） #

如果需要在用户停止输入一段时间后显示错误，同时失焦时立即显示，可以结合RxJS的debounceTime实现：

1. 组件内添加错误状态监听 #

import { FormControl, FormGroup, Validators } from '@angular/forms';
import { debounceTime, distinctUntilChanged, map, of } from 'rxjs';

// 表单定义示例
form = new FormGroup({
  email: new FormControl('', [Validators.required, Validators.email])
});

// 获取延迟错误状态的Observable
get emailDelayedError$() {
  const emailControl = this.form.get('email');
  return emailControl?.statusChanges.pipe(
    debounceTime(500), // 设置延迟时间，比如500ms
    distinctUntilChanged(),
    map(status => status === 'INVALID' && emailControl.dirty)
  ) || of(false);
}

2. 模板中更新显示逻辑 #

<inm-validation-message
  class="validation-container"
  *ngIf="control && control.invalid && (control.touched || emailDelayedError$ | async)"
  [control]="control">
</inm-validation-message>

逻辑说明：

• 用户输入过程中，错误消息不会立即弹出，只有当停止输入超过500ms时，才会显示错误。
• 一旦控件失焦（touched为true），会立即显示错误，兼顾即时反馈和输入体验。

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