Angular表单输入验证：仅允许数字和点，禁止短横线

HTML原生没有直接属性可以阻止number类型输入框的短横线输入，你可以通过以下两种Angular专属方式实现需求：

方法1：自定义指令实时拦截非法输入 #

这种方式能在用户输入/粘贴时直接过滤掉短横线、多个小数点等非法内容，体验更流畅。

1.1 创建拦截指令 #

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

@Directive({
  selector: '[appOnlyNumberAndDot]'
})
export class OnlyNumberAndDotDirective {

  // 拦截键盘输入事件
  @HostListener('keydown', ['$event']) onKeyDown(event: KeyboardEvent) {
    const allowedKeys = ['0','1','2','3','4','5','6','7','8','9','.', 'Backspace','Tab','ArrowLeft','ArrowRight','Delete'];
    
    // 直接阻止短横线输入
    if (event.key === '-') {
      event.preventDefault();
      return;
    }

    // 限制只能输入一个小数点
    if (event.key === '.' && (event.target as HTMLInputElement).value.includes('.')) {
      event.preventDefault();
      return;
    }

    // 只允许白名单内的按键
    if (!allowedKeys.includes(event.key)) {
      event.preventDefault();
    }
  }

  // 拦截粘贴事件，过滤非法内容
  @HostListener('paste', ['$event']) onPaste(event: ClipboardEvent) {
    event.preventDefault();
    const pastedText = event.clipboardData?.getData('text') || '';
    // 过滤掉非数字和小数点的字符
    const cleanedText = pastedText.replace(/[^0-9.]/g, '');
    // 确保只有一个小数点
    const parts = cleanedText.split('.');
    const finalText = parts.length > 2 ? `${parts[0]}.${parts.slice(1).join('')}` : cleanedText;
    (event.target as HTMLInputElement).value += finalText;
  }
}

1.2 在输入框上应用指令 #

<input name="myNumber" step="any" type="number" formControlName="myNumber" appOnlyNumberAndDot>

方法2：表单正则验证（配合错误提示） #

如果不需要实时拦截，也可以通过表单验证规则限制输入内容，不符合规则时标记错误：

2.1 给FormControl添加验证规则 #

import { Validators } from '@angular/forms';

// ...

myForm = this.fb.group({
  myNumber: [null, [Validators.pattern(/^\d*\.?\d*$/)]],
});

注意：确保formControlName和表单组内的字段名一致，你示例中HTML用的是myNumber，TS里是question_number，需要统一成同一个名称。

2.2 页面添加错误提示 #

<input name="myNumber" step="any" type="number" formControlName="myNumber">
<div *ngIf="myForm.get('myNumber')?.invalid && myForm.get('myNumber')?.touched" style="color:red;">
  只能输入数字和小数点
</div>

额外说明 #

• 正则表达式/^\d*\.?\d*$/允许空值、纯数字、带小数点的数字；如果需要强制输入至少一个数字，可以改成/^\d+(\.\d+)?$/
• 使用type="number"能保留浏览器数字键盘的友好交互，配合指令可以兼顾体验和输入限制

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