NG-ZORRO InputNumber组件小数点输入问题解析

NG-ZORRO作为一款基于Angular的企业级UI组件库，其InputNumber数字输入框组件在19.1.0版本中出现了一个关于小数点输入的特殊情况。本文将深入分析这一问题产生的原因、影响范围以及解决方案。

问题现象

当用户尝试在InputNumber组件中输入类似"1.02"这样的小数时，组件会直接将"1.0"替换为整数"1"。具体表现为：

• 输入"1.0"时，显示自动变为"1"
• 输入"1.02"时，显示先变为"1"，然后才能继续输入"2"

技术背景

InputNumber组件在处理用户输入时，有一套完整的数值格式化逻辑。这包括：

1. 实时验证输入的有效性
2. 自动格式化显示
3. 处理不完整的数值输入

在19.1.0版本中，组件的格式化逻辑将"3.0"这样的输入视为不完整数值，因此会自动格式化为整数"3"。

根本原因分析

经过技术团队排查，问题出在组件的输入验证正则表达式上。当前版本使用/[.。]$/来检测不完整的小数输入，这导致：

• "3.0"被匹配为不完整输入（因为以".0"结尾）
• 组件认为这是用户未输入完成的中间状态
• 于是自动格式化为"3"

解决方案

技术团队提出了改进方案，将正则表达式扩展为/[.。](\d*0)?$/。这一改进能够更精确地识别真正不完整的输入状态。

改进后的效果对比：

输入场景

1. 输入"3.0"时：

   • 旧版：显示为"3"
   • 新版：保持"3.0"

2. 输入"3.10"时：

   • 旧版：显示为"3.1"
   • 新版：保持"3.10"

3. 输入"3.00"时：

   • 旧版：显示为"3"
   • 新版：保持"3.00"

删除场景

1. 从"3.01"删除最后一个字符：

   • 旧版：变为"3"
   • 新版：保持"3.0"

2. 从"3.101"删除最后一个字符：

   • 旧版：变为"3.1"
   • 新版：保持"3.10"

3. 从"3.001"删除最后一个字符：

   • 旧版：变为"3"
   • 新版：保持"3.00"

技术实现细节

新的正则表达式/[.。](\d*0)?$/的工作原理：

• [.。]匹配小数点（兼容中文句号）
• (\d*0)?匹配任意数字后跟0的情况
• $确保匹配的是字符串结尾

这种设计能更准确地识别用户是否真的完成了小数输入，而不是简单地认为所有以0结尾的小数都是未完成状态。

最佳实践建议

对于使用InputNumber组件的开发者，建议：

1. 及时更新到包含此修复的版本
2. 对于需要精确小数位的场景（如金额输入），明确设置组件的精度参数
3. 在测试时特别注意边界情况，如".0"结尾的数值输入

总结

NG-ZORRO团队对InputNumber组件的这一改进，体现了对用户体验细节的关注。通过优化输入验证逻辑，解决了小数点后跟0时的自动格式化问题，使组件行为更加符合用户预期。这也提醒我们，在开发表单控件时，需要特别关注各种边界条件下的用户输入场景。