Angular：如何通过指令限制文本框仅允许输入整数？

嘿，我来帮你搞定这个指令的问题～你现在的代码只是阻止了事件冒泡，但完全没处理输入的内容，所以用户当然能随便输入啦😉。咱们来一步步修改：

问题根源 #

你用event.stopPropagation()或者event.preventDefault()都没用，因为输入事件触发时，内容已经被输入到文本框里了，这两个方法只是控制事件的传递，没法回退已经输入的内容。咱们需要主动过滤输入的字符，只保留数字。

修改后的完整指令代码 #

import { Directive, ElementRef, HostListener, Optional } from '@angular/core';
import { NgControl } from '@angular/forms';

@Directive({ selector: 'input[numbersOnly]' })
export class NumberDirective {
  constructor(
    private _el: ElementRef,
    @Optional() private ngControl: NgControl // 注入表单控件，同步ngModel值
  ) { }

  @HostListener('input', ['$event']) onInputChange(event: InputEvent) {
    const inputElement = event.target as HTMLInputElement;
    // 过滤非数字字符
    const filteredValue = inputElement.value.replace(/[^0-9]/g, '');
    
    // 如果过滤后的值和原内容不同，才更新
    if (filteredValue !== inputElement.value) {
      // 更新输入框显示值
      inputElement.value = filteredValue;
      // 同步ngModel/表单控件的值（如果用了表单）
      if (this.ngControl) {
        this.ngControl.control?.setValue(filteredValue);
      }
    }
  }
}

为什么这样改？ #

• 注入NgControl是为了让指令和Angular表单（比如ngModel或响应式表单）同步，不然只改输入框的value，表单模型里的值不会更新，会导致数据不一致。
• 用正则/[^0-9]/g匹配所有非数字字符，替换为空，只保留0-9的整数。
• 加了判断filteredValue !== inputElement.value，避免不必要的重复更新。

额外优化：处理光标位置（可选） #

如果用户在中间输入非数字字符，光标会跳到末尾，体验不太好。可以加一段代码保存光标位置，更新后再恢复：

@HostListener('input', ['$event']) onInputChange(event: InputEvent) {
  const inputElement = event.target as HTMLInputElement;
  const cursorPosition = inputElement.selectionStart; // 保存当前光标位置
  const originalValue = inputElement.value;
  const filteredValue = originalValue.replace(/[^0-9]/g, '');
  
  if (filteredValue !== originalValue) {
    inputElement.value = filteredValue;
    if (this.ngControl) {
      this.ngControl.control?.setValue(filteredValue);
    }
    // 恢复光标位置（如果删除了字符，光标位置要调整）
    const adjustedPosition = cursorPosition - (originalValue.length - filteredValue.length);
    inputElement.setSelectionRange(adjustedPosition, adjustedPosition);
  }
}

这样用户输入非数字字符时，会直接被过滤掉，光标位置也能保持正常～

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