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

Question

我需要一个 thousand separator input mask 指令或 Ionic 3 应用程序。我尝试了 2 个指令。但他们都没有工作。你知道这方面的工作指令吗？

例如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 将说明如何进行。