Angular响应式表单：如何限制number输入框仅允许输入整数？

我之前也碰到过这个问题——step="1"其实只是控制输入框增减按钮的步长，浏览器本身不会限制用户手动输入小数，得从输入拦截和表单验证两方面入手解决。给你几个实用的方案：

方案一：实时输入拦截（简单快速） #

直接在输入框上绑定input事件，实时过滤掉非整数的内容，包括小数点和其他非法字符：

模板修改： #

<input #valueRef tabindex="1" type="number" step="1" name="value" id="value" 
       placeholder="Enter value" class="form-control" formControlName="value" 
       [ngClass]="{ 'is-invalid': submitted && adjForm.controls['value'].errors && !this.data.isAdjAccount }"
       (input)="filterIntegerInput($event)" />

组件中添加处理方法： #

filterIntegerInput(event: Event) {
  const inputElement = event.target as HTMLInputElement;
  // 仅保留数字和负号（如果需要禁止负数，去掉正则里的"-"即可）
  let sanitizedValue = inputElement.value.replace(/[^0-9-]/g, '');
  
  // 处理多个负号的情况（比如输入"--123"会被修正为"-123"）
  if (sanitizedValue.startsWith('--')) {
    sanitizedValue = sanitizedValue.substring(1);
  }
  
  inputElement.value = sanitizedValue;
  // 手动触发表单控件值更新，确保响应式表单同步
  this.adjForm.controls['value'].setValue(sanitizedValue);
}

方案二：自定义Angular指令（复用性强） #

如果项目中有多个需要禁止小数的输入框，推荐封装成自定义指令，方便全局复用：

创建指令文件only-integer.directive.ts： #

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

@Directive({
  selector: '[appOnlyInteger]'
})
export class OnlyIntegerDirective {

  @HostListener('input', ['$event']) onInputChange(event: Event) {
    const inputElement = event.target as HTMLInputElement;
    let sanitizedValue = inputElement.value.replace(/[^0-9-]/g, '');
    
    // 修复多负号问题
    if (sanitizedValue.startsWith('--')) {
      sanitizedValue = sanitizedValue.substring(1);
    }
    
    inputElement.value = sanitizedValue;
  }
}

在模块中声明指令： #

import { OnlyIntegerDirective } from './only-integer.directive';

@NgModule({
  declarations: [
    // ...其他组件
    OnlyIntegerDirective
  ]
})
export class YourModule { }

在模板中使用指令： #

<input #valueRef tabindex="1" type="number" step="1" name="value" id="value" 
       placeholder="Enter value" class="form-control" formControlName="value" 
       [ngClass]="{ 'is-invalid': submitted && adjForm.controls['value'].errors && !this.data.isAdjAccount }"
       appOnlyInteger />

方案三：表单自定义验证（兜底保障） #

不管用哪种输入拦截方案，都建议配合表单验证做兜底，防止特殊场景下的非法值（比如通过控制台修改DOM值）：

添加自定义验证器： #

import { AbstractControl, ValidatorFn } from '@angular/forms';

// 整数验证器
export function integerValidator(): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } | null => {
    const value = control.value;
    // 空值交由必填验证处理
    if (value === null || value === '') return null;
    
    const isInteger = Number.isInteger(Number(value));
    return isInteger ? null : { notInteger: true };
  };
}

在表单控件中应用验证器： #

import { integerValidator } from './validators';

// 创建表单时添加验证器
this.adjForm = this.fb.group({
  value: ['', [
    Validators.required,
    integerValidator() // 添加自定义整数验证
  ]]
});

模板中显示错误提示： #

<div *ngIf="submitted && adjForm.controls['value'].errors?.notInteger" class="invalid-feedback">
  请输入有效的整数
</div>

额外优化：隐藏浏览器默认增减按钮（可选） #

如果不需要输入框的增减按钮，可以用CSS去掉：

/* Chrome/Safari */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

推荐组合使用自定义指令+表单验证，既实时拦截非法输入提升用户体验，又通过表单验证确保数据的正确性。

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