Angular指令绑定输入框值时触发DOMException，需仅修改显示值

问题根源 #

你遇到的DOMException是因为在change事件回调里直接修改input的value，这会再次触发change/input事件，导致事件正在派发时又触发新的事件，形成循环冲突。另外，后端绑定值的时候不会触发change事件（这个事件只在用户手动交互时触发），所以你的指令在后端赋值时根本不会生效，这也是之前绑定值时无效的原因。

正确实现思路 #

要实现「显示值与实际表单值分离」的需求，不能直接在DOM事件里修改value，得利用Angular表单的生命周期或者控件值访问器来做拦截，核心是：

• 监听表单控件的值变化（覆盖后端绑定的场景）
• 只修改input的显示值，不改动表单控件的实际值
• 避免在事件派发过程中修改DOM属性

具体实现方案 #

方案1：监听表单控件的valueChanges（推荐，适用于响应式表单）

如果用的是响应式表单，可以直接注入NgControl获取对应的FormControl，监听其值变化后更新input显示值：

import { Directive, ElementRef, OnInit, OnDestroy } from '@angular/core';
import { NgControl } from '@angular/forms';
import { Subscription } from 'rxjs';

@Directive({
  selector: '[appPassword]',
  standalone: true,
})
export class PasswordDirective implements OnInit, OnDestroy {
  private textbox!: HTMLInputElement;
  private valueSub?: Subscription;

  constructor(
    private readonly el: ElementRef,
    private readonly ngControl: NgControl
  ) {}

  ngOnInit(): void {
    // 定位目标input元素
    this.textbox = this.el.nativeElement.tagName === 'INPUT' 
      ? this.el.nativeElement 
      : this.el.nativeElement.querySelector('input');

    // 监听表单控件的值变化
    this.valueSub = this.ngControl.control?.valueChanges.subscribe(value => {
      this.updateDisplayValue(value);
    });

    // 初始化时检查一次当前值
    this.updateDisplayValue(this.ngControl.control?.value);
  }

  private updateDisplayValue(value: any): void {
    if (value === '*') {
      // 异步更新避免事件冲突
      setTimeout(() => {
        this.textbox.value = '';
      }, 0);
    } else {
      this.textbox.value = value ?? '';
    }
  }

  ngOnDestroy(): void {
    this.valueSub?.unsubscribe();
  }
}

方案2：针对模板驱动表单（ngModel）

如果用的是模板驱动表单，通过监听ngModelChange事件来同步值，并手动控制显示内容：

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

@Directive({
  selector: '[appPassword][ngModel]',
  standalone: true,
})
export class PasswordDirective implements OnInit {
  private textbox!: HTMLInputElement;

  constructor(private readonly el: ElementRef) {}

  ngOnInit(): void {
    this.textbox = this.el.nativeElement.tagName === 'INPUT' 
      ? this.el.nativeElement 
      : this.el.nativeElement.querySelector('input');
    // 初始化检查显示值
    this.updateDisplayValue(this.textbox.value);
  }

  @HostListener('ngModelChange', ['$event'])
  onModelChange(value: any): void {
    this.updateDisplayValue(value);
  }

  @HostListener('input', ['$event'])
  onInput(event: Event): void {
    // 用户手动输入时，保持表单值与输入值一致
    const inputValue = (event.target as HTMLInputElement).value;
    if (inputValue !== '') {
      (this.el.nativeElement as any).ngModel = inputValue;
    }
  }

  private updateDisplayValue(value: any): void {
    if (value === '*') {
      setTimeout(() => {
        this.textbox.value = '';
      }, 0);
    } else {
      this.textbox.value = value ?? '';
    }
  }
}

关键注意点 #

• 用setTimeout包裹DOM修改操作，让当前事件循环完成后再更新，避免「事件正在派发」的错误
• 不要直接在change/input事件回调里修改input的value，否则会触发新的事件导致冲突
• 必须监听表单控件的值变化（而非单纯DOM事件），这样后端绑定值时才能触发逻辑

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