Angular禁止非数字输入的自定义指令不生效问题咨询

问题可能的原因 #

• 指令未注册：你编写的NumberDirective没有在使用该指令的Angular模块的declarations数组中声明，Angular无法识别number-directive属性，指令逻辑完全不会执行。
• 未绑定Angular表单控件：你的指令依赖注入了NgControl，该实例只有在input标签使用[(ngModel)]、formControl或formControlName等Angular表单相关指令时才会存在。你当前的input仅使用原生[value]绑定，没有关联Angular表单控件，导致this.el.control为undefined，patchValue方法无法执行，字符替换逻辑不生效。
• patchValue未同步到原生视图：即使表单控件存在，patchValue仅会更新Angular表单模型的值，不会强制同步到原生input的显示值，会出现模型已替换但视图仍显示非数字字符的问题。
• class属性语法错误（非核心原因）：input标签的class属性写法class="search__input form-control-md + {{class}}"中的多余加号会导致class渲染异常，但不会直接影响指令生效。

修复方案 #

方案1：不需要依赖Angular表单，直接操作原生DOM（适配你当前的input写法） #

修改指令代码如下：

import { Directive, HostListener, ElementRef } from "@angular/core";

@Directive({
  exportAs: "numberDirective",
  selector: "[number-directive]",
})
export class NumberDirective {
  constructor(private el: ElementRef<HTMLInputElement>) {}

  @HostListener("input", ["$event.target.value"])
  onInput(value: string): void {
    const cleanedValue = value.replace(/[^0-9]/g, "");
    if (value !== cleanedValue) {
      this.el.nativeElement.value = cleanedValue;
    }
  }
}

方案2：保留NgControl依赖，适配Angular表单写法 #

给input添加Angular表单绑定，替换原有[value]：

<input
  type="text"
  tabindex="0"
  class="search__input form-control-md {{class}}"
  [(ngModel)]="config.value"
  [required]="config.required"
  [attr.maxlength]="config.maxLength"
  [attr.minLength]="config.minLength"
  #inputElem
  number-directive
/>

同时修改指令的patchValue逻辑，强制同步视图：

@HostListener("input", ["$event.target.value"])
onInput(value: string): void {
  const cleanedValue = value.replace(/[^0-9]/g, "");
  this.el.control.patchValue(cleanedValue, {emitEvent: false});
}

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