Angular带货币掩码的输入框如何绑定并保持数字类型变量？

问题根因 #

你的绑定变量始终为字符串类型，核心有两点原因：

1. parse方法的返回值为字符串类型，onBlur、onChange事件中直接将该字符串赋值给innerValue并传入onChangeCallback，这是触发外部双向绑定更新的直接来源
2. 你在value getter中添加的parseFloat不会生效：Angular的ControlValueAccessor机制下，外部绑定变量的更新完全由onChangeCallback传入的值决定，和自定义的getter没有关联

所需修改的代码 #

1. 改造parse方法，返回数字类型 #

将原parse方法的返回值从字符串改为数字类型，修改后代码如下：

parse(value: string, allowNegative = false): number {
    if (!value) return 0;
    let [integer, fraction = ''] = (value || '').split(this.decimalSeparator);
    integer = integer.replace(new RegExp(/[^\d\.]/, 'g'), '');
    fraction = parseInt(fraction, 10) > 0 ? this.decimalSeparator + (fraction + '000000').substring(0, 2) : '';
    const rawValue = integer + fraction;
    if (allowNegative && value.startsWith('(') && value.endsWith(')')) {
        return -1 * parseFloat(rawValue);
    } else {
        return parseFloat(rawValue || '0');
    }
}

2. 调整transform方法参数类型（可选） #

原transform方法第一个参数定义为string类型，当外部传入数字初始值时会触发类型报错，将参数类型改为any即可，不影响原有逻辑：

transform(value: any, allowNegative = false, decimalPrecision: number = 2) {
    // 原有逻辑保持不变
}

效果验证 #

修改完成后，输入框依然会正常显示带$前缀、千分位分隔的格式化货币样式，而[(ngModel)]绑定的变量会始终保持严格的数字类型，完全满足API的JSON解析要求。

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