Angular 11.2下自定义指令访问模板驱动NgModel值为空无触发问题

该问题是Angular版本升级后编译逻辑变化 + 指令配置错误共同导致的，不属于NgModel运行机制的核心变更。

根因说明 #

• 你的指令在providers数组中主动声明了NgModel，这会导致Angular为当前指令单独创建一个全新的独立NgModel实例，而非读取宿主input元素上已经通过[(ngModel)]绑定的现有NgModel实例。全新实例没有关联任何绑定值，自然会出现this.model.value始终为null、valueChanges不触发的现象。
• Angular 8使用ViewEngine编译器，对依赖注入的实例查找优先级处理有特殊兼容逻辑，当时额外声明的NgModel未生效，所以代码可以正常运行；Angular 11默认启用Ivy编译器，依赖注入逻辑更严谨，你声明的本地providers会优先创建实例，问题就暴露了。

修复方法 #

仅需修改指令的@Directive配置，移除providers数组中的NgModel即可，原有业务逻辑不需要调整：

@Directive({
  selector: '[ngModel][currency]',
  // 仅保留CurrencyPipe，删除额外声明的NgModel
  providers: [CurrencyPipe],
})
export class CurrencyDirective implements OnDestroy {
  // 剩余原有代码全部保持不变即可
  // ...
}

可选优化建议 #

1. 无需额外声明ngModelChange输出，直接调用注入的NgModel实例的control.setValue()方法即可更新绑定值，逻辑更简洁。
2. 可移除jQuery依赖，用原生JS实现选中输入内容的逻辑：

// 替换原有jQuery选中逻辑
this.el.nativeElement.addEventListener('mouseup', (e) => e.preventDefault(), { once: true });
this.el.nativeElement.select();

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