Angular如何实现文本输入框仅接受百分比数值输入

完全可以通过「自动过滤非数值内容+末尾自动追加%后缀」的方式实现该需求，以下是可直接复用的实现逻辑：

核心实现步骤 #

• 监听输入框的数值变化，先通过正则过滤所有非数字、非小数点的非法字符
• 按需限制数值的小数位数（比如最多保留2位小数）
• 处理完成后自动在末尾拼接%后缀，同时避免触发循环更新

代码示例 #

1. 组件TS代码（基于响应式表单） #

import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { distinctUntilChanged } from 'rxjs/operators';

@Component({
  selector: 'app-percent-input',
  templateUrl: './percent-input.component.html'
})
export class PercentInputComponent implements OnInit {
  percentControl = new FormControl('');

  ngOnInit(): void {
    this.percentControl.valueChanges
      .pipe(distinctUntilChanged())
      .subscribe(value => {
        if (!value) return;
        // 移除所有非数字、非小数点字符，先清除已有%避免重复处理
        let cleanValue = value.replace(/[^0-9.]/g, '');
        // 限制最多1个小数点，最多2位小数，可按需调整规则
        const dotCount = (cleanValue.match(/\./g) || []).length;
        if (dotCount > 1) {
          const firstDotIndex = cleanValue.indexOf('.');
          cleanValue = cleanValue.slice(0, firstDotIndex + 1) + cleanValue.slice(firstDotIndex + 1).replace(/\./g, '');
        }
        if (cleanValue.includes('.')) {
          const parts = cleanValue.split('.');
          parts[1] = parts[1].slice(0, 2);
          cleanValue = parts.join('.');
        }
        // 拼接%后缀后更新控件值，设置emitEvent为false避免循环触发订阅
        this.percentControl.setValue(cleanValue ? `${cleanValue} %` : '', { emitEvent: false });
      });
  }

  // 提交时获取纯数值的方法
  getPurePercentValue(): number | null {
    const value = this.percentControl.value;
    if (!value) return null;
    return parseFloat(value.replace(/\s?%/g, ''));
  }
}

2. 组件模板代码 #

<input type="text" [formControl]="percentControl" placeholder="请输入百分比">

补充说明 #

• 如果不需要使用响应式表单，也可以直接在模板中绑定input事件处理过滤逻辑，实现效果一致
• 可根据业务需求调整数值限制规则，比如限制最大值为100、禁止输入小数点等
• 提交数据时调用getPurePercentValue方法即可获取不带%的纯数值用于接口提交

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