Angular Reactive Form校验规则不生效，type为text的输入框如何仅允许输入数字

你配置的Validators.pattern是表单校验规则，仅会判断表单控件值是否合规、标记表单状态为invalid，不会拦截用户的输入行为，所以依然可以输入任意字符，这是Angular响应式表单校验的默认行为。

下面两种方案都可以在保持type="text"的前提下实现仅允许输入数字（可自定义是否保留逗号、小数点）：

方案1：直接绑定input事件过滤字符（适合单一场景） #

1. 给input标签添加input事件监听，同时可以加inputmode="decimal"优化移动端键盘弹出体验

<input autoComplete="off" autoCorrect="off"
    type="text"
    lang="en"
    inputmode="decimal"
    [formControl]="config.textInput"
    placeholder="0.0"
    minLength="1"
    maxLength="79"
    spellCheck="false"
    (input)="filterInput($event)"
    (ngModelChange)="amountChanged($event)"
    enterkeyhint="next"
    step="1"
    class="w-100"
>

2. 在组件类中添加过滤方法

filterInput(event: Event) {
  const inputEl = event.target as HTMLInputElement;
  // 正则可按需调整，当前规则是仅保留数字、逗号、小数点，不需要的字符直接删掉即可
  const filtered = inputEl.value.replace(/[^0-9.,]/g, '');
  inputEl.value = filtered;
  // 同步更新表单控件值
  this.config.textInput.setValue(filtered, { emitEvent: false });
}

方案2：封装自定义指令（适合多场景复用） #

1. 新建数字输入限制指令

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

@Directive({
  selector: '[appNumberOnly]'
})
export class NumberOnlyDirective {
  // 自定义允许输入的字符，当前支持数字、逗号、小数点
  private readonly allowReg = /[0-9.,]/;

  constructor(private inputEl: ElementRef<HTMLInputElement>) {}

  // 拦截输入事件过滤非法字符
  @HostListener('input', ['$event'])
  handleInput(event: InputEvent) {
    const originVal = this.inputEl.nativeElement.value;
    const filteredVal = originVal.split('').filter(c => this.allowReg.test(c)).join('');
    if (originVal !== filteredVal) {
      this.inputEl.nativeElement.value = filteredVal;
      this.inputEl.nativeElement.dispatchEvent(new Event('input'));
    }
  }

  // 可选：拦截粘贴事件，过滤粘贴内容中的非法字符
  @HostListener('paste', ['$event'])
  handlePaste(event: ClipboardEvent) {
    event.preventDefault();
    const pasteContent = event.clipboardData?.getData('text') || '';
    const filteredContent = pasteContent.replace(/[^0-9.,]/g, '');
    document.execCommand('insertText', false, filteredContent);
  }
}

2. 在对应模块的declarations数组中声明该指令后，直接在input标签上使用即可

<input ... appNumberOnly>

如果需要保留表单校验能力，可以根据你的业务需求调整pattern规则，你当前的[0-9]{7}仅支持7位纯数字，若要支持逗号、小数点可修改为类似Validators.pattern(/^[0-9]+([.,][0-9]+)?$/)的规则，实现更严谨的格式校验。

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