Angular 支持负数、全键盘操作的货币编辑控件方案咨询

核心开发需求 #

• 基于Angular框架开发可编辑货币值的表单控件，应用于类电子表格风格页面
• 支持负数录入，可直接先输入负号再录入对应数值
• 兼容全键盘操作，支持通过Tab键在不同输入框间无缝切换
• 展示规则要求：负号位于货币前缀$之前，货币值始终保留两位小数
• 输入识别规则：直接输入-50.50这类字符时，自动识别为对应负额美元金额

已尝试第三方组件的问题 #

ngx-currency #

基础用法示例：

<input currencyMask [(ngModel)]="value">

存在问题：

• 仅支持用户输入完数值后再输入负号，操作逻辑不符合使用直觉
• 输入负号时光标会直接跳转至输入框末尾，交互体验较差

PrimeNG Input Number #

基础用法示例：

<p-inputNumber [(ngModel)]="value" mode="currency"
  currency="USD" locale="en-US"></p-inputNumber>

存在问题：

• 输入负号后再录入数字，光标会直接跳转到输入框末尾的小数分位后方，完全无法正常使用

ngx-mask #

基础用法示例：

<input [(ngModel)]="value" mask="separator" thousandSeparator=","
  prefix="$" [allowNegativeNumbers]="true">

存在问题：

• 负号会出现在$符号之后，不符合预期的负号在$前的展示规则
• 无法实现货币值始终保留两位小数的效果，出现$50.5这类展示时会被产品负责人驳回，属于目前最接近需求的实现

可行实现方案 #

基于Angular自定义指令实现原生适配，可完全绕开第三方组件的逻辑限制：

• 实现ControlValueAccessor接口，对接Angular表单双向绑定逻辑，保证Tab切换、表单校验等原生能力不受影响
• 输入事件处理逻辑自定义控制：
  • 允许输入框开头直接输入-负号，符合用户输入直觉
  • 输入时实时控制光标位置，避免光标跳转到末尾的问题
  • 失焦时自动格式化：补全两位小数、添加千分位分隔符、将负号移至$前缀之前
  • 输入-50.50这类字符串时自动解析为数值类型，同时按规则格式化展示为-$50.50

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