Angular中限制输入仅为十进制数：无法输入小数点问题

我来帮你搞定这个问题！你当前的代码之所以无法输入小数点，是因为你的正则表达式/^\d+(\.\d{1,2})?$/是用来匹配完整的十进制数值字符串的，但在keypress事件中你只检查了单个输入的字符——单个小数点.显然不满足这个完整的正则规则，所以被阻止输入了。

下面是修正后的解决方案：

1. 修改keyPressConversionFactor事件处理函数 #

我们需要调整逻辑，不再检查单个字符是否符合完整数值格式，而是结合当前输入框的已有内容，允许合法的输入（数字、单个小数点，且小数部分最多两位）：

keyPressConversionFactor(event: any) {
  const inputChar = String.fromCharCode(event.charCode);
  const currentValue = event.target.value;

  // 只允许输入数字和小数点，其他字符直接阻止
  if (!/[\d.]/.test(inputChar)) {
    event.preventDefault();
    return;
  }

  // 如果输入的是小数点，检查当前值是否已经包含小数点（避免多个小数点）
  if (inputChar === '.' && currentValue.includes('.')) {
    event.preventDefault();
    return;
  }

  // 如果已经存在小数点，检查小数部分是否已经达到2位（限制最多两位小数）
  if (currentValue.includes('.')) {
    const decimalPart = currentValue.split('.')[1];
    if (decimalPart && decimalPart.length >= 2) {
      event.preventDefault();
      return;
    }
  }
}

2. 补充表单验证（可选但推荐） #

为了防止用户通过粘贴等方式输入不符合规则的内容，建议在表单控件的验证规则中添加正则验证，确保提交时的值符合要求：

假设你的表单是用FormGroup创建的，修改conversionFactor控件的验证规则：

import { Validators, FormGroup, FormBuilder } from '@angular/forms';

// 在组件初始化表单的地方
this.Conversion = this.fb.group({
  conversionFactor: ['', [
    Validators.required,
    Validators.pattern(/^\d+(\.\d{1,2})?$/) // 确保值是最多两位小数的十进制数
  ]]
});

这样即使用户绕过键盘输入（比如粘贴），表单也会标记该字段为无效，配合你已有的错误提示，就能完整实现输入验证了。

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