Angular 15自定义指令：无法获取ngModel引用及触发模型更新求助

直接看修正后的代码，再逐一解释问题原因：

修正后的指令代码 #

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

@Directive({
  selector: '[ngModel][appCustomDirective]'
})
export class CustomDirective {
  constructor(
    private renderer: Renderer2,
    private elementRef: ElementRef,
    private ngModel: NgModel
  ) { }

  @HostListener("blur")
  onBlur() {
    const input = this.elementRef.nativeElement;
    const trimmedValue = input.value?.trim();

    if (trimmedValue) {
      this.renderer.setProperty(input, 'value', trimmedValue);
      // 同步更新模型并触发变更事件
      this.ngModel.control.setValue(trimmedValue, { emitEvent: true });
      // 手动触发input事件确保变更检测生效
      this.renderer.dispatchEvent(input, new Event('input'));
    } else {
      this.renderer.setProperty(input, 'value', '');
      this.ngModel.control.setValue('', { emitEvent: true });
      this.renderer.dispatchEvent(input, new Event('input'));
    }
  }
}

问题原因与解决细节 #

1. 无法获取实际NgModel引用 #

你之前在指令的providers数组中声明了NgModel，这会强制Angular为指令创建一个独立的NgModel实例，而非注入宿主<input ngModel>关联的真实实例。移除providers: [NgModel]后，就能拿到与输入框绑定的正确NgModel引用。

2. 无法触发模型更新 #

仅修改DOM元素的value属性不会同步到Angular表单模型，必须通过NgModel的API来更新：

• 使用this.ngModel.control.setValue()直接更新模型值，{ emitEvent: true }参数会触发表单的变更事件，确保组件中的绑定数据同步更新。
• 手动触发input事件是为了兼容Angular的变更检测机制，避免视图与模型出现短暂不一致的情况。

3. this.ngModel.model为undefined #

model是NgModel内部的私有属性（Angular 15中已不再对外暴露），获取模型值应该使用this.ngModel.value或this.ngModel.control.value。之前因为注入了错误的NgModel实例，导致该属性始终为undefined，现在使用正确的实例后即可正常获取值。

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