ionic4 ReactiveForms 'live‘货币面具

Question

我正在寻找一个用于Ionic4 type=angular的实时货币掩码，它将以反应性的形式实现，也就是说，当您通过添加千分隔符自动键入它的格式时。

我使用了“angular2-text-掩码”："8.0.1“与”文本掩码-加载项“："3.5.1”表示成功，但它使用了ngModel和模板表单。任何反应形式或建议的解决方案将不胜感激。

Answer 1

好的，所以我找到了一个适用于Ionic 4的解决方案，它使用了几乎所有的实时掩码，包括一个可定制的货币掩码。它也适用于反应性表单和模板表单。如果您使用的是离子4，请安装angualr 2文本掩码https://github.com/text-mask/text-mask/tree/master/angular2并按照以下说明操作：

• npm i angular2-文本-掩码-保存
• 然后:将{ TextMaskModule }从‘angular2-文本掩码’导入到相应页面的模块中；
• 如果您正在使用货币掩码，则安装文本掩码外接程序: npm i文本掩码-外接程序-保存。
• 您不需要在模块中注册它，只需将其导入页面，例如从“文本掩码-加载项/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: '.' });

代码中还有标准的表单--我使用了表单生成器。

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

我希望这能帮到其他人。

Answer 2

我也面临着同样的问题，最后我使用了(ionChange)

<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的解决方案。