本文介绍在 Angular 中通过 HTML 属性限制 + 表单验证双重手段，确保 <input type="number"> 仅接受整数且范围严格限定在 0–100，彻底规避 ., e, E, - 等非法字符触发的自动转换与验证失效问题。

本文介绍在 angular 中通过 html 属性限制 + 表单验证双重手段，确保 `` 仅接受整数且范围严格限定在 0–100，彻底规避 `.`, `e`, `e`, `-` 等非法字符触发的自动转换与验证失效问题。

在 Angular 表单中使用 <input type="number"> 处理百分比输入（如 0–100 的整数）时，开发者常遇到一个关键陷阱：浏览器原生会将 50.0 自动转为 50、将 2e1 解析为 20，导致 FormControl.value 始终是合法数字，无法在 Validators 中捕获原始非法输入（如含小数点或 e 的字符串）。因此，验证必须前置到输入阶段，而非仅依赖模型值校验。

✅ 正确方案：HTML 层拦截 + 表单层校验双保险

1. HTML 层主动拦截非法字符
   使用 onkeypress 事件（注意：keydown 在某些场景下可能不兼容移动端）限制仅允许 ASCII 数字字符（0–9，对应 charCode 48–57），同时配合 step="1" 和 min/max 属性强化语义约束：

   <input
     formControlName="num"
     type="number"
     min="0"
     max="100"
     step="1"
     onkeypress="return event.charCode >= 48 && event.charCode <= 57"
     title="请输入 0–100 的整数"
   >

   ⚠️ 注意：onkeypress 不拦截粘贴（Paste）、拖放（Drag & Drop）或键盘快捷键（如 Ctrl+V）。若需完整防护，应补充 oninput 或 ngModelChange 监听并清理非法内容（见进阶建议）。

2. 表单层绑定数值范围验证
   即使 HTML 层已做限制，仍需 Validators.min(0) 和 Validators.max(100) 提供可编程的错误状态与 UI 反馈（如显示红色边框、错误提示）：

   this.formGroup = new FormGroup({
     num: new FormControl(0, [
       Validators.required,
       Validators.min(0),
       Validators.max(100)
     ]),
   });

3. 完整组件示例（Angular 17+ Standalone）

   import { Component, OnInit } from '@angular/core';
   import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
   
   @Component({
     selector: 'app-percentage-input',
     standalone: true,
     imports: [ReactiveFormsModule],
     template: `
       <form [formGroup]="formGroup">
         <input
           formControlName="num"
           type="number"
           min="0"
           max="100"
           step="1"
           onkeypress="return event.charCode >= 48 && event.charCode <= 57"
           placeholder="0–100 的整数"
         />
         @if (formGroup.controls.num.invalid && formGroup.controls.num.touched) {
           <div class="error">
             @if (formGroup.controls.num.hasError('required')) {
               该字段为必填项
             }
             @if (formGroup.controls.num.hasError('min')) {
               值不能小于 0
             }
             @if (formGroup.controls.num.hasError('max')) {
               值不能大于 100
             }
           </div>
         }
       </form>
     `,
     styles: [`
       .error { color: #d32f2f; font-size: 12px; margin-top: 4px; }
     `]
   })
   export class PercentageInputComponent implements OnInit {
     formGroup: FormGroup<{ num: FormControl<number> }>;
   
     ngOnInit() {
       this.formGroup = new FormGroup({
         num: new FormControl<number>(0, [
           Validators.required,
           Validators.min(0),
           Validators.max(100)
         ])
       });
     }
   }

? 补充说明与注意事项

• type="number" 的 step="1" 是关键：它明确禁止小数输入（浏览器会忽略 .5 等输入），但不能阻止用户手动输入 . 或 e —— 这正是需 onkeypress 拦截的原因。
• 避免使用 pattern 属性：<input pattern="[0-9]{1,3}"> 对 type="number" 无效，因浏览器不执行 pattern 校验。
• 移动端兼容性：iOS Safari 对 onkeypress 支持良好；Android Chrome 同样适用。如需更高兼容性，可用 HostListener('input') 结合正则清洗值（例如：this.control.setValue(this.control.value.toString().replace(/[^0-9]/g, ''))）。
• 不要依赖 inputmode="numeric"：它仅优化软键盘布局，不提供任何输入限制。

通过 HTML 层字符级拦截与 Angular 表单验证协同工作，既能即时阻止非法输入，又能提供清晰的用户反馈，真正实现「0–100 整数百分比」的健壮输入控制。