千分选离子3输入掩模

Question

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

例如50,000

.html

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

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

文本掩码问题

NG2-货币面具发行

Answer 1

这是我的格式化版本，也适用于离子型。

打字本：

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>

它需要在错误管理和货币添加方面进行一些改进(它接受前面的'$‘符号)。我将regexp设置为接受10小数位数。

演示

如果您不希望使用小数，而只希望输入数字，则此演示将演示如何。