如何区分Angular响应式表单输入来自键盘还是程序化赋值？

下面是几种可行的实现方案，适用于不同场景：

方案1：通过输入事件判断来源 #

手动键盘输入会触发原生input/change事件，而setValue()是代码层面修改，不会触发这类DOM事件。可以利用这一点做区分：

模板中绑定输入事件：

<input formControlName="username" (input)="markAsManualInput()">

组件内维护状态标记：

private isManualInput = false;

markAsManualInput(): void {
  this.isManualInput = true;
}

// 调用setValue时主动标记为代码修改
updateUsernameViaCode(value: string): void {
  this.isManualInput = false;
  this.form.get('username')?.setValue(value);
}

// 在valueChanges中判断来源
this.form.get('username')?.valueChanges.subscribe(() => {
  if (this.isManualInput) {
    console.log('用户手动输入');
  } else {
    console.log('通过setValue设置');
  }
});

注意：如果存在JS模拟输入的场景，这种方法可能出现误判，但常规业务场景下足够实用。

方案2：自定义可追踪的FormControl #

通过扩展原生FormControl，重写setValue方法添加标记，是更可靠的方案：

import { FormControl } from '@angular/forms';

export class TrackableFormControl extends FormControl {
  // 标记是否为代码触发的修改
  isProgrammaticChange = false;

  override setValue(value: any, options?: any): void {
    this.isProgrammaticChange = true;
    super.setValue(value, options);
    // 异步重置标记，避免影响后续判断
    setTimeout(() => {
      this.isProgrammaticChange = false;
    });
  }
}

组件内使用自定义控件并监听变更：

// 初始化表单时使用自定义控件
this.form = new FormGroup({
  username: new TrackableFormControl('')
});

// 监听值变化并判断来源
this.form.get('username')?.valueChanges.subscribe(() => {
  const control = this.form.get('username') as TrackableFormControl;
  if (control.isProgrammaticChange) {
    console.log('通过setValue设置数据');
  } else {
    console.log('用户手动输入数据');
  }
});

这种方案不受外部事件干扰，准确性更高，适合需要严格区分的场景。

方案3：利用setValue的emitEvent选项 #

调用setValue时设置emitEvent: false，手动控制事件触发时机并标记来源：

private isProgrammatic = false;

// 代码设置值
setUsernameProgrammatically(value: string): void {
  this.isProgrammatic = true;
  // 禁止自动触发valueChanges
  this.form.get('username')?.setValue(value, { emitEvent: false });
  // 手动触发变更
  this.form.get('username')?.updateValueAndValidity();
}

// 监听valueChanges
this.form.get('username')?.valueChanges.subscribe(() => {
  if (this.isProgrammatic) {
    console.log('代码设置数据');
    this.isProgrammatic = false;
  } else {
    console.log('手动输入数据');
  }
});

该方案需要每次调用setValue时都手动处理标记，适合小范围、场景单一的需求。

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