带千位分隔符 ionic 3 的输入面罩

Question

我需要一个 thousand separator input mask 指令或者 Ionic 3 应用程序。我试过 2 个指令。但其中 none 正在工作。你知道那方面的工作指示吗？

例如50,000

.html

<ion-input type="tel" [ngModel]="data?.budget" formControlName="budget" (ngModelChange)="data.budget=$event"></ion-input>

我已经在 Git 上记录了问题。请也看看：

text-mask Issue

ng2-currency-mask Issue

Answer 1

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

打字稿：

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 位小数的数字。

DEMO

如果您不希望输入小数而只希望输入数字，此 DEMO 说明了如何。

带千位分隔符 ionic 3 的输入面罩

Input mask with thousand separator ionic 3

javascript

typescript

input-mask

ionic3

angular