带有千位分隔符的输入掩码 ionic 3

推荐答案

这是我的格式化版本，也适用于 ionic.

Here is my version of formatting that works on ionic too.

打字稿:

format(valString) {
    if (!valString) {
        return '';
    }
    let val = valString.toString();
    const parts = this.unFormat(val).split(this.DECIMAL_SEPARATOR);
    return parts[0].replace(/B(?=(?:d{3})+(?!d))/g, this.GROUP_SEPARATOR) + (!parts[1] ? '' : this.DECIMAL_SEPARATOR + parts[1]);
};

unFormat(val) {
    if (!val) {
        return '';
    }
    val = val.replace(/^0+/, '');

    if (this.GROUP_SEPARATOR === ',') {
        return val.replace(/,/g, '');
    } else {
        return val.replace(/./g, '');
    }
};

HTML:

<ion-input [(ngModel)]="budget"  pattern="^[$-s]*[d,]*?([.]d{0,10})?s*$"
style="border:1px solid black" #myBudget="ngModel" (input)="budget = format(budget)"></ion-input>
<p style="color:red" *ngIf="myBudget.errors && myBudget.errors?.pattern">Enter numbers only</p>

它需要在错误管理和货币添加方面进行一些改进(它接受前导$"符号).我将正则表达式设置为接受小数点后 10 位的数字.

It need some improvements in error management and currency addition (it accepts leading '$' sign). I set the regexp to accept numbers with 10 decimals.

演示

如果您不希望输入小数而只输入数字，则此 DEMO 展示了如何.

If you wish no decimals and only numeric input, this DEMO shows how.

这篇关于带有千位分隔符的输入掩码 ionic 3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！