如何在原生元素上触发ngModel以同步更新绑定值？

问题原因 #

直接修改原生 DOM 元素的 value 属性时，Angular 的 ngModel 并不会自动感知到变化——因为 ngModel 依赖监听输入框的 input 事件来同步数据，手动赋值不会触发该事件，导致视图与模型脱节。

解决方案一：手动触发 input 事件 #

在设置输入框值后，手动派发 input 事件，让 Angular 检测到值变化并同步到 ngModel：

import { Directive, ElementRef, HostListener } from '@angular/core';

export class PasteFilterDirective {
  constructor(private element: ElementRef) {}

  @HostListener('paste', ['$event'])
  handlePaste(event: ClipboardEvent) {
    event.preventDefault();

    const rawText = event.clipboardData?.getData('text/plain') || '';
    const parsedText = this.removeSpecialChars(rawText);

    this.element.nativeElement.value = parsedText;
    // 手动触发 input 事件，通知 Angular 更新 ngModel
    this.element.nativeElement.dispatchEvent(new InputEvent('input'));
  }

  private removeSpecialChars(str: string): string {
    const matches = str.match(/[A-Za-z0-9]/g);
    return matches ? matches.join('') : '';
  }
}

解决方案二：通过 NgControl 直接更新模型（推荐） #

更符合 Angular 规范的做法是注入 NgControl，直接操作表单控件的模型值，无需手动触发事件，Angular 会自动同步视图与模型：

import { Directive, ElementRef, HostListener, Inject } from '@angular/core';
import { NgControl } from '@angular/forms';

export class PasteFilterDirective {
  constructor(
    private element: ElementRef,
    @Inject(NgControl) private control: NgControl
  ) {}

  @HostListener('paste', ['$event'])
  handlePaste(event: ClipboardEvent) {
    event.preventDefault();

    const rawText = event.clipboardData?.getData('text/plain') || '';
    const parsedText = this.removeSpecialChars(rawText);

    // 直接更新表单控件模型值，Angular 自动同步视图
    this.control.control?.setValue(parsedText);
  }

  private removeSpecialChars(str: string): string {
    const matches = str.match(/[A-Za-z0-9]/g);
    return matches ? matches.join('') : '';
  }
}

额外优化：处理空值边界情况 #

原代码中如果 rawText 为空或无匹配字符，str.match() 会返回 null，调用 join('') 会报错。上述代码添加了空值判断，避免运行时错误。

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