如何让Control Value Accessor指令在blur而非input时更新模型？

要实现仅在失焦（blur）时更新模型的Control Value Accessor（CVA），核心是调整模型同步的触发时机——把默认的input事件监听替换为blur事件，同时遵循CVA的标准实现规范。以下是具体步骤和代码示例：

1. 创建指令并实现ControlValueAccessor接口 #

首先定义指令，通过NG_VALUE_ACCESSOR提供者让Angular识别它为表单控件的访问器：

import { Directive, ElementRef, forwardRef, HostListener } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Directive({
  selector: '[blurUpdate]',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => BlurUpdateDirective),
      multi: true
    }
  ]
})
export class BlurUpdateDirective implements ControlValueAccessor {
  // 保存Angular传入的回调函数
  private onChange: (value: any) => void = () => {};
  private onTouched: () => void = () => {};

  constructor(private el: ElementRef<HTMLInputElement>) {}

  // 从模型同步值到视图
  writeValue(value: any): void {
    this.el.nativeElement.value = value ?? '';
  }

  // 注册模型更新回调
  registerOnChange(fn: (value: any) => void): void {
    this.onChange = fn;
  }

  // 注册控件触碰状态回调（用于表单验证）
  registerOnTouched(fn: () => void): void {
    this.onTouched = fn;
  }

  // 处理控件禁用状态
  setDisabledState(isDisabled: boolean): void {
    this.el.nativeElement.disabled = isDisabled;
  }

  // 监听blur事件，触发模型更新
  @HostListener('blur')
  onBlur(): void {
    const currentValue = this.el.nativeElement.value;
    this.onChange(currentValue); // 同步值到模型
    this.onTouched(); // 标记控件为已触碰
  }
}

2. 关键逻辑说明 #

• 替换触发事件：用@HostListener('blur')监听失焦事件，替代默认的input事件触发模型更新。
• 核心回调调用：在blur事件中，先获取输入框当前值，再调用onChange通知Angular更新模型；同时调用onTouched标记控件为已触碰，这对表单验证（如required、minlength）的触发时机很重要。
• 视图与模型同步：writeValue方法负责把模型初始值同步到输入框，确保视图和模型初始状态一致。

3. 使用方式 #

在需要的输入控件上添加指令即可：

<!-- 配合FormControl使用 -->
<input type="text" formControlName="email" blurUpdate>

<!-- 配合ngModel使用 -->
<input type="text" [(ngModel)]="username" blurUpdate>

扩展：自定义组件实现CVA #

如果是自定义表单组件（而非指令），逻辑类似：只需在组件内部的输入框上监听blur事件，然后调用CVA的onChange和onTouched回调即可。

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