升级Angular 15后HostListener失效，无法获取ngControl.value

升级至Angular 15后，自定义的TrimText指令停止工作，this.ngControl.value返回空值，无法正常执行文本修剪逻辑。原指令代码如下：

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

@Directive({ selector: '[TrimText]'})
export class TrimTextDirective {
  constructor(private ngControl: NgControl) {
  }
  @HostListener('input', ['$event']) 
    onInputChange() {
        this.ngControl.control?.setValue(this.ngControl.value.replace(/^\s+/g, '').replace(/^\s+|\s+$/gm,' '));
    }
}

问题原因 #

Angular 15对表单控件的初始化与值同步逻辑进行了调整，ngControl.value在input事件触发时可能尚未完成更新，导致直接读取返回空值。此外，原代码未处理视图值与模型值的同步问题，进一步加剧了失效情况。

解决方案 #

修改指令逻辑，直接从DOM元素获取输入值，同时同步模型值与视图值，避免依赖未更新的ngControl.value：

修改后的完整代码 #

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

@Directive({ selector: '[TrimText]'})
export class TrimTextDirective {
  constructor(private ngControl: NgControl) {
  }

  @HostListener('input', ['$event']) 
  onInputChange(event: Event) {
    const inputElement = event.target as HTMLInputElement;
    const trimmedValue = inputElement.value.replace(/^\s+/g, '').replace(/^\s+|\s+$/gm, ' ');

    // 仅在值发生变化时执行更新，避免循环触发
    if (trimmedValue !== inputElement.value) {
      // 禁用事件发射，防止setValue再次触发input事件
      this.ngControl.control?.setValue(trimmedValue, { emitEvent: false });
      // 同步视图值，确保输入框显示修剪后的内容
      inputElement.value = trimmedValue;
    }
  }
}

关键调整说明 #

• 直接从event.target获取输入值：绕过ngControl.value的同步延迟问题，确保获取到最新的用户输入。
• 添加emitEvent: false：避免调用setValue时再次触发input事件，造成循环执行。
• 增加值变化判断：仅在修剪后的值与原值不同时才执行更新，减少不必要的操作。
• 同步视图值：确保输入框显示的内容与模型值一致，避免视图与模型脱节。

额外检查项 #

• 确认指令已在对应模块的declarations数组中声明（若使用NgModules），或在独立组件的imports中引入（若使用独立组件模式）。
• 确保表单控件正确绑定了[(ngModel)]或formControlName，ngControl能正常注入。

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