Question

我需要thousand separator input mask指令或Ionic 3个应用。我试过了2个指令。但他们都没有工作。你知道工作指令吗？

e.g。 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

这是我的离子格式化版本。

<强>打字稿：

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>

在错误管理和货币添加方面需要一些改进（它接受领先的＆＃39; $＆＃39;标志）。我将正则表达式设置为接受10位小数的数字。

<强> DEMO

如果您不希望小数而只需要数字输入，则DEMO显示如何。

输入掩模有千分离离子3

1 个答案: