本文介绍在 Angular 中通过 HTML 属性限制 + 表单验证组合方案，防止 <input type="number"> 接收小数点（.）、科学计数法（如 2e1）等非法字符，并确保仅接受 0–100 范围内的整数。
本文介绍在 angular 中通过 html 属性限制 + 表单验证组合方案，防止 `` 接收小数点（`.`）、科学计数法（如 `2e1`）等非法字符，并确保仅接受 0–100 范围内的整数。
在 Angular 表单中，直接监听 FormControl.value 无法捕获原始输入（如 50.0 会被自动转为 50，2e1 被解析为 20），导致自定义验证器失效。根本解法是在用户输入阶段即拦截非法字符，而非依赖后续值校验。
✅ 正确实践：前端输入拦截 + 双重验证
-
HTML 层硬性限制：利用原生属性与事件处理阻止非法字符输入
- type="number" + step="1" 强制整数步进
- min="0" / max="100" 设定合法范围（注意：此处示例用 min="1"，实际应按需设为 0）
- onkeypress 仅允许数字键（ASCII 48–57，即 0–9），彻底屏蔽 .、e、- 等
- title="Numbers only" 提供友好提示
Angular 表单层增强验证：补充 Validators.min(0) 和 Validators.max(100)，确保提交时数值合规（防绕过 JS 的手动修改）
<form [formGroup]="formGroup">
<input
name="num"
id="num"
formControlName="num"
type="number"
min="0"
max="100"
step="1"
onkeypress="return event.charCode >= 48 && event.charCode <= 57"
title="Numbers only (0–100, no decimals or exponents)"
/>
<div *ngIf="formGroup.controls['num'].invalid && formGroup.controls['num'].touched">
<small *ngIf="formGroup.controls['num'].hasError('min')">Must be ≥ 0</small>
<small *ngIf="formGroup.controls['num'].hasError('max')">Must be ≤ 100</small>
</div>
{{ formGroup.controls['num'].errors | json }}
</form>// 组件 TS
ngOnInit() {
this.formGroup = new FormGroup({
num: new FormControl(0, [
Validators.required,
Validators.min(0),
Validators.max(100),
// 可选：添加自定义整数验证（如需更严格类型检查）
(control: AbstractControl) => {
const value = control.value;
return Number.isInteger(value) ? null : { notInteger: true };
}
]),
});
}⚠️ 注意事项
- onkeypress 在现代浏览器中兼容性良好，但若需支持粘贴（Ctrl+V）场景，建议额外监听 onpaste 并过滤非数字内容；
- step="1" 是关键——若省略，浏览器可能允许输入小数（如 50.5）并默认接受；
- 不要依赖 input[type="number"] 的默认行为做唯一校验，其对 e、+、- 的处理因浏览器而异；
- Angular 的 Validators.pattern(/^[0-9]+$/) 对 FormControl 值无效（因值已被解析），必须在输入事件层面拦截。
综上，通过「输入时阻断非法字符」+「提交时双重数值校验」，可可靠实现 0–100 整数输入约束，彻底规避 50.0、2e1 等问题。
