输入掩模千分离离子3 [英] Input mask with thousand separator ionic 3
问题描述
我需要一个千分隔符
输入掩码
指令或者 Ionic 3
app。我试过了2个指令。但他们都没有工作。你知道工作指令吗?
I need a thousand separator
input mask
directive or else with Ionic 3
app. I have tried 2 directives. But none of them were working. Do you know working directive for that?
例如。 50,000
.html
<ion-input type="tel" [ngModel]="data?.budget" formControlName="budget" (ngModelChange)="data.budget=$event"></ion-input>
我已经在Git上记录了问题。请看一下:
I have logged issues on Git. please see that too:
推荐答案
这是我的离子格式化版本。
Here is my version of formatting that works on ionic too.
打字稿:
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位小数的数字。
It need some improvements in error management and currency addition (it accepts leading '$' sign). I set the regexp to accept numbers with 10 decimals.
DEMO
如果您不希望小数而且只有数字输入,则 DEMO 显示了如何。
If you wish no decimals and only numeric input, this DEMO shows how.
这篇关于输入掩模千分离离子3的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!