Angular表单无法输入小数问题求助：正则与inputmode配置仍失效

可能的问题原因 #

• 正则过滤逻辑有缺陷：如果你的正则仅简单保留数字和小数点，却没处理用户输入23.这类中间状态，直接转成数值的话，23.会被解析为23，导致输入框里的小数点被自动移除，用户没法继续输入小数位。
• 数值类型转换丢失输入格式：把过滤后的字符串直接转成number类型再赋值给表单控件，会自动剔除末尾的小数点（比如"23."转成23），控件值更新后输入框只剩23，用户会误以为小数点输不进去。
• 表单值更新触发重渲染，光标异常：每次input事件都更新formControl的值，会导致输入框重新渲染，光标跳回开头，用户输入小数点后光标乱跑，直观上感觉输入无效。

解决思路 #

1. 优化输入处理逻辑，保留字符串格式 #

不要直接转成数值，以字符串形式处理输入，确保允许单个小数点（包括末尾的小数点）：

onBolivaresOrPesosInput(event: Event, controlName: string) {
  const inputElement = event.target as HTMLInputElement;
  let value = inputElement.value;
  
  // 过滤非数字和非小数点字符
  value = value.replace(/[^0-9.]/g, '');
  // 只保留第一个小数点，后续的小数点直接剔除
  const parts = value.split('.');
  if (parts.length > 2) {
    value = parts[0] + '.' + parts.slice(1).join('');
  }
  
  // 以字符串形式赋值，关闭事件触发避免循环
  this.formGroup.get(controlName)?.setValue(value, { emitEvent: false });
}

这样23.这类中间输入状态会被保留，用户可以继续输入小数位。

2. 修复光标位置异常问题 #

更新输入框值时手动保存并恢复光标位置，避免光标跳走：

onBolivaresOrPesosInput(event: Event, controlName: string) {
  const inputElement = event.target as HTMLInputElement;
  const cursorPos = inputElement.selectionStart;
  const originalLen = inputElement.value.length;
  
  // 执行上面的过滤逻辑...
  
  // 计算光标偏移量，恢复光标位置
  const diff = value.length - originalLen;
  this.formGroup.get(controlName)?.setValue(value, { emitEvent: false });
  setTimeout(() => {
    inputElement.selectionStart = inputElement.selectionEnd = cursorPos + diff;
  }, 0);
}

3. 改用type="number"配合step属性（可选方案） #

如果不需要复杂过滤，直接用type="number"并设置step="0.01"来允许小数输入，Angular表单会自动处理数值类型：

<input type="number" step="0.01" formControlName="bolivares" />

可通过CSS隐藏浏览器默认的数字增减按钮：

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}

4. 封装自定义表单控件/指令 #

如果需要更复杂的货币输入逻辑（比如自动添加千分位、货币符号），可以封装成Angular自定义表单控件或指令，统一处理输入过滤、格式显示和值转换，代码更易维护。

内容的提问来源于stack exchange，提问作者ELVIN DANIEL MORENO LOPEZ