如何在TypeScript函数中为input元素程序化设置ngModel与ngModelChange？

在Angular中，ngModel是框架提供的表单指令，不能直接通过DOM元素的属性赋值来完成绑定，必须借助Angular的指令API来实现。以下是具体的实现方案：

前提条件 #

确保目标input元素已经在Angular模板中声明，且预先添加了[(ngModel)]指令（哪怕初始绑定的是一个临时变量），否则无法获取到NgModel指令实例。

实现代码 #

首先在组件中注入必要的Angular服务，然后编写AttachUserSelector函数：

import { Injector, NgModel, ChangeDetectorRef } from '@angular/core';

// 假设你的组件构造函数中已注入以下服务
constructor(
  private injector: Injector,
  private cdr: ChangeDetectorRef
) {}

public AttachUserSelector(inputElement: HTMLInputElement, options: UserSelectorOptions) {
  // 获取input元素对应的NgModel指令实例
  const ngModel = this.injector.get(NgModel, null, { host: inputElement });

  if (!ngModel) {
    console.error('目标input元素未绑定NgModel指令，请先在模板中添加[(ngModel)]属性');
    return;
  }

  // 初始化input值为options.model
  ngModel.valueAccessor.writeValue(options.model);

  // 订阅input值变化，触发modelChange回调
  ngModel.valueChanges?.subscribe((newValue) => {
    // 调用外部传入的变更回调
    options.modelChange(newValue);
    // 同步更新options.model的值
    options.model = newValue;
    // 若组件使用OnPush变更检测策略，需手动触发变更检测
    this.cdr.markForCheck();
  });
}

关键逻辑说明 #

1. 获取NgModel实例：通过Injector的get方法，以input元素作为宿主，获取附着在其上的NgModel指令实例。
2. 设置初始值：调用valueAccessor.writeValue()方法，将options.model的值同步到input框中，对应模板中[(ngModel)]的初始绑定效果。
3. 订阅值变化：通过valueChanges observable监听input值的变更，在回调中调用options.modelChange，同时同步更新options.model，保持数据一致性。
4. 变更检测处理：如果组件采用OnPush变更检测策略，需要调用cdr.markForCheck()通知Angular更新视图。

特殊场景处理 #

如果目标input元素是动态创建的（未预先在模板中声明），则需要先将元素纳入Angular的视图容器并编译模板，才能绑定NgModel。这种场景推荐使用Angular的动态组件创建API（ComponentFactoryResolver + ViewContainerRef），而非直接操作DOM。

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