Angular数字表单控件输入非数字仍保持VALID状态问题

问题原因 #

你遇到的情况根源在于：

• type="number"的输入框在输入非有效数字（比如带字母的"2dddd"）时，浏览器会将输入判定为无效数值，Angular的FormControl会自动把控件值设为null。
• 你使用的Validators.pattern("^[0-9]*$")默认对null或undefined返回验证通过，所以控件状态仍显示为VALID。

解决方案 #

方案一：自定义验证器，覆盖null校验逻辑

创建一个自定义验证器，同时处理null和非纯数字的情况，逻辑更灵活：

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

export function numericOnlyValidator(): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    // 可根据需求调整：如果允许空值，就把!control.value时的返回改成null
    if (!control.value) {
      return { numericOnly: '请输入纯数字' };
    }
    const isValid = /^[0-9]*$/.test(control.value.toString());
    return isValid ? null : { numericOnly: '只能输入数字' };
  };
}

替换原有验证器：

this.reportForm.addControl(
    'xyz',
    new FormControl(xyz, [numericOnlyValidator()])
);

方案二：从输入源头限制，避免无效内容

将输入框改为type="text"，通过input事件实时过滤非数字字符，用户输入的字母会直接被清除：

<input
   type="text"
   formControlName="xyz"
   (input)="filterNonNumeric($event)"
>

组件内实现过滤方法：

filterNonNumeric(event: Event) {
  const inputElement = event.target as HTMLInputElement;
  // 移除所有非数字字符
  inputElement.value = inputElement.value.replace(/[^0-9]/g, '');
  // 同步更新表单控件的值
  this.reportForm.get('xyz')?.setValue(inputElement.value);
}

这种方式能直接从输入层面阻止无效内容，配合自定义验证器使用体验更佳。

方案三：结合必填验证拦截null（仅适用于不允许空值的场景）

如果你的控件不允许空值，直接添加Validators.required，这样输入无效内容导致值为null时，会触发必填错误，控件状态变为INVALID：

this.reportForm.addControl(
    'xyz',
    new FormControl(xyz, [
      Validators.required,
      Validators.pattern("^[0-9]*$")
    ])
);

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