带有千分离器的输入掩膜3

Question

我需要一个thousand separatorinput 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

这里是我的版本格式，太多的离子作品。

打字稿：

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

DEMO

如果你希望没有小数，只有数字输入，这DEMO展示了如何。