如何使用文本掩码中的 angular2 createNumberMask 用小数格式化百分比

Posted 2023-03-13

【中文标题】如何使用文本掩码中的 angular2 createNumberMask 用小数格式化百分比

【英文标题】：how to format percent with decimal using angular2 createNumberMask from text-mask

【发布时间】：2017-10-03 05:33:35

【问题描述】：

我使用 text-mask 表示角度 2 来格式化带小数的百分比。为此，我使用 createNumberMask 插件。当我尝试将带小数的字符串格式化为百分比时，出现运行时错误无法准备好未定义的属性“测试”。下面是我如何格式化掩码的示例。

let percentMask = createNumberMask(
        prefix: '',
        suffix: '%',
        allowDecimal: true
    );

使用上面的掩码，然后我调用函数返回我的掩码数组，如下所示

let mask = percentMask('4.5');

然后我将这个掩码传递给conformToMask，如下所示：

let conformed = conformToMask('4.5', mask, guide:false);

这会引发以下运行时错误 'Error in :0:0 Caused by: Cannot read property 'test' of undefined.

实现上述功能以允许用户输入带小数的百分比并使其格式正确的正确方法是什么。即用户输入 4.5，然后在 UI 中显示为 4.5%。

【问题讨论】：

你有没有想过解决这个问题？

@eyalhakim 是吗？

【参考方案1】：

我很确定这是一个错误。 You can see a discussion about it here。我设法通过删除由createNumberMask 返回的函数创建的'[]' 元素来解决这个问题：

let percentMask = createNumberMask(
    prefix: '',
    suffix: '%',
    allowDecimal: true
);

let mask = percentMask('4.5');
mask = mask.filter((val) => val != '[]');   // <-- this removes the '[]' elements

let conformed = conformToMask('4.5', mask, guide:false);