Angular中如何从自定义输入长度限制指令更新ngModel？

你现在遇到的问题应该是：指令里修改了输入框的显示值，但组件绑定的ngModel没有同步更新对吧？这是因为单纯用@Input() ngModel只能单向获取值，没法反向同步模型。要解决这个问题，我们得借助Angular表单体系里的NgControl来实现视图和模型的双向同步。

下面是修改后的完整指令代码，我会一步步给你讲清楚逻辑：

第一步：导入并注入NgControl #

首先要引入NgControl，它是Angular表单控件的核心类，能直接关联当前ngModel绑定的表单控件实例，帮我们同步更新值。

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

@Directive({
  selector: '[appLimitTo]',
})
export class LimitToDirective {
  @Input() limit: number;

  // 注入NgControl，关联当前ngModel对应的表单控件
  constructor(@Inject(NgControl) private ngControl: NgControl) {}

  @HostListener('input', ['$event']) onInput(e: Event) {
    const input = e.target as HTMLInputElement;
    let value = input.value;

    // 过滤非数字字符（如果允许小数点，可把正则改成/[^0-9.]/g，还要额外处理多小数点的情况）
    value = value.replace(/[^0-9]/g, '');
    
    // 截断到指定长度
    if (value.length > this.limit) {
      value = value.substring(0, this.limit);
    }

    // 关键操作：通过NgControl同步更新模型和视图，组件里的property会自动跟着变
    this.ngControl.control?.setValue(value);
  }
}

核心逻辑解释 #

• 为什么不用原来的@Input() ngModel？因为@Input()是单向绑定，只能从组件拿值，没法把修改后的值传回组件。而NgControl直接对接表单控件实例，control.setValue()会同时更新输入框显示值和组件里的property变量，完美解决双向同步问题。
• 加正则过滤非数字字符是因为type="number"的输入框其实允许用户输入e、+这类特殊字符，会导致长度判断不准，提前过滤能让逻辑更严谨。
• 别忘了确保你的模块已经导入了FormsModule（模板驱动表单）或者ReactiveFormsModule（响应式表单），否则NgControl没法正常注入。

额外优化建议 #

如果你的场景是限制整数长度，可以和输入框的min、max属性配合使用，比如min="1" max="99999"，这样既限制了位数，也限定了数值范围，用户体验会更好。

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