Question

我正在寻找Ionic4 type = angular的实时货币掩码，以反应形式实现，即当您键入时，通过添加千位分隔符自动格式化。

我成功使用了“ angular2-text-mask”：“ 8.0.1”和“ text-mask-addons”：“ 3.5.1”，但是它使用了ngModel和模板形式。对于反应形式或建议的任何解决方案将不胜感激。

Answer 1

好，所以我找到了一种适用于Ionic 4的解决方案，它几乎可以使用任何实时掩码（包括可自定义的货币掩码）来工作。它也适用于反应式和模板形式。如果您使用的是ionic 4，请安装angualr 2文本蒙版https://github.com/text-mask/text-mask/tree/master/angular2并按照说明进行操作，即：

npm i angular2-text-mask-保存
然后：从“ angular2-text-mask”导入{TextMaskModule}到相应页面的模块中；
如果您使用的是货币掩码，则安装文本掩码附加组件：npm i text-mask-addons --save
您无需在模块中注册，只需将其导入页面即可，例如从'text-mask-addons / dist / createNumberMask'导入createNumberMask
这很重要-不要使用离子输入，只需在html中使用输入标签
我发现使用引导程序表单并避免使用离子列表，离子项目等（换句话说，使用普通的html例如，

<label for="lb">Bond/ Rental?</label> 
<input formControlName = 'bond' class="form-control" id = "lb" 
    [textMask]="{mask:numberMask}" type ="tel" />

货币掩码的页面组件代码是一个变量：

numberMask = createNumberMask({ prefix:'', thousandsSeparatorSymbol: ',', allowDecimal: true, decimalSymbol: '.' });

代码中也是标准格式-例如，我使用了formbuilder

 this.housingForm = formBuilder.group({
      bond: ['' , Validators.compose([Validators.required])], 
      ......

我希望这对其他人有帮助。

Answer 2

我遇到了同样的问题，最终我使用了(ionChange)

HTML

<ion-input [formControlName]="NAME" (ionChange)="formatCurrency($event)"></ion-input>

TS

formatCurrency($event) {
    var aux = $event.target.value;
    aux = aux.replace(/\./g, "");
    aux = aux.replace(/\s/g, "");
    aux = aux.replace(/\$/g, "");
    aux = aux.replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.');
    if (aux.length > 1) aux = aux.replace(/^0+/, ''); /* Replace leading zeros */
    $event.target.value = "$" + aux;
}

这是一个简单的解决方案，它是我发现的唯一使用ion-input

的解决方案

ionic4 ReactiveForms实时货币掩码

2 个答案: