Angular中如何编写仅接受0-30整数、拒绝小数的表单校验器

现有内置规则的缺陷说明 #

Angular内置的Validators.min(0)、Validators.max(30)仅做数值大小判断，只要输入值为有效数字，哪怕是0.1、20.1这类落在区间内的小数，都会判定为校验通过，完全没有整数校验能力，无法满足拦截小数输入的业务要求。

自定义校验逻辑实现 #

所有自定义校验函数完全兼容Angular响应式表单的校验接口，可直接替换原有内置规则使用。

方案1：原生数值判断实现（无正则依赖） #

该方案借助JS原生Number.isInteger方法判断整数属性，逻辑直白无边界坑，同时兼容数字、字符串类型的输入值。
实现代码：

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

export const rangeIntegerValidator = (): ValidatorFn => {
  return (control: AbstractControl): ValidationErrors | null => {
    const inputVal = control.value;
    // 空值直接放行，适配非必填表单场景
    if (inputVal === null || inputVal === undefined || inputVal === '') {
      return null;
    }
    // 拦截非数字类无效输入
    const numVal = Number(inputVal);
    if (Number.isNaN(numVal)) {
      return { invalidNumber: '请输入有效数字' };
    }
    // 核心整数校验：拦截所有小数类输入
    if (!Number.isInteger(numVal)) {
      return { notInteger: '仅允许输入整数，不支持小数' };
    }
    // 0-30闭区间范围校验
    if (numVal < 0 || numVal > 30) {
      return { outOfRange: '输入数值需在0到30区间内' };
    }
    return null;
  };
};

方案2：正则匹配实现 #

如果业务要求统一通过正则做输入合法性校验，可直接使用以下规则匹配0-30区间内的纯整数，天然拦截小数、超范围值、非数字输入。
匹配正则：
/^(0|[1-9]\d?|30)$

• 规则说明：匹配开头到结尾全内容，单独匹配合法值0、1-29的正整数、上限值30，规则内不允许出现小数点、负号、非数字字符，从根源拦截小数输入。
  对应校验函数实现：

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

export const rangeIntegerRegexValidator = (): ValidatorFn => {
  const validRangeReg = /^(0|[1-9]\d?|30)$/;
  return (control: AbstractControl): ValidationErrors | null => {
    const inputVal = control.value;
    // 空值直接放行，适配非必填表单场景
    if (inputVal === null || inputVal === undefined || inputVal === '') {
      return null;
    }
    // 去除输入前后的空格后做匹配，避免用户误输入空格导致的校验异常
    const strVal = String(inputVal).trim();
    if (!validRangeReg.test(strVal)) {
      return { invalidInput: '仅允许输入0-30之间的整数，不支持小数' };
    }
    return null;
  };
};

表单使用方式 #

两种校验器的调用方式和Angular内置校验器完全一致，在初始化表单时直接传入校验规则列表即可：

this.formGroup = this.fb.group({
  // 方案1使用示例
  score: ['', [rangeIntegerValidator()]],
  // 方案2使用示例
  // score: ['', [rangeIntegerRegexValidator()]]
});

校验效果对照 #

• 合法输入：0、2、20、30 → 校验通过
• 非法输入：-1、0.1、20.1、30.9、任意非数字内容 → 校验拦截

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