ng2-currency-mask 十进制输入点或逗号

问题描述

我想要输入值，它允许我同时使用点或逗号等符号，然后它将仅替换为逗号。

我正在使用货币掩码。

https://www.npmjs.com/package/ngx-currency-mask

这是我的代码

payment-trans.page.html

<ion-header no-border>
  <ion-toolbar>
    <ion-title>
      {{'idchecker.payment.paymentTrans.title' | translate}}
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding-horizontal>
  <div class="bar"></div>
  <div class="decription">
    <div class="sub-header">
      <h5>
        {{'idchecker.payment.paymentTrans.cardnr' | translate}} {{cnumber}}
      </h5>
    </div>
    <p text-wrap>
      {{'idchecker.payment.paymentTrans.text' | translate}}
    </p>
  </div>

  <div class="btns-holder">
    <form [formGroup]="form">
      <ion-item lines="none">
       <input currencyMask formControlName="amount" [textMask]="{mask:numberMask}" type ="text" placeholder="€  " />
    <!-- Test1   <input currencyMask formControlName="amount" type ="text" placeholder="€  " />-->

        <!-- test2 <input  formControlName="amount" (keyup)="onKeyUp($event)" type ="text" placeholder="€  " />-->

      </ion-item>

      <ion-button expand="block" (click)="proceed()" [disabled]="!form.valid">
        {{'idchecker.payment.paymentTrans.ok' | translate}}
      </ion-button>

      <ion-button expand="block" (click)="cancel()">
          Annuleren
        </ion-button>
    </form>
    </div>
</ion-content>
<ion-footer no-border>
    <ion-toolbar text-center>
      <ion-button fill="none" size="large" (click)="showMenu()">
          <ion-icon name="menu"></ion-icon>
      </ion-button>
    </ion-toolbar>
  </ion-footer>

payment-trans.page.ts

import {Component,OnInit} from '@angular/core';
import {BarcodeScanner} from '@ionic-native/barcode-scanner/ngx';
import {AlertController,ModalController,NavController} from '@ionic/angular';
import {ActivatedRoute} from '@angular/router';
import {BasePage} from '../shared/util/base.page';
import {createNumberMask} from 'text-mask-addons/dist/textMaskAddons';
import {FormBuilder,FormGroup,Validators} from "@angular/forms";
import {TranslateService} from '@ngx-translate/core';

@Component({
  selector: 'app-payment-trans',templateUrl: './payment-trans.page.html',styleUrls: ['./payment.page.scss'],})
export class PaymentTransPage extends BasePage implements OnInit {

  amount: number;
  token: string;
  labels: any;
  public form: FormGroup;
//NUMBER_REGEXP = /^(\d+)(,\d{1,2}|\.\d{1,2})?€/;
 numberMask = createNumberMask({ prefix: '€  ',thousandsSeparatorSymbol: '',allowDecimal: true,decimalSymbol: ',' });
//numberMask = createNumberMask({ prefix: '€  ',decimalSymbol: '.'  });

  constructor(modalCtrl: ModalController,private formBuilder: FormBuilder,private barcodeScanner: BarcodeScanner,private route: ActivatedRoute,private alertCtrl: AlertController,public navCtrl: NavController,private translateService: TranslateService) {
    super(modalCtrl);
    this.buildForm();
  }

  private buildForm() {

    this.form = this.formBuilder.group({
      amount: [null,[Validators.required]]
    });
  }

  ngOnInit() {
    this.cnumber = this.route.snapshot.paramMap.get('cnumber');
    this.translateService.get('idchecker.payment.paymentTrans').subscribe( res => {
      this.labels = res;
    });
  }

  async presentAlert() {
    const alert = await this.alertCtrl.create({
      header: this.labels.errorTitle,message: this.labels.errorMessage,mode: 'ios',buttons: [  {
        text: this.labels.askSupport,handler: () => {
          this.navCtrl.navigateRoot('support');
        }
      },{
          text: this.labels.again,role: 'cancel',}]
    });

    await alert.present();
  }

  proceed() {
    if (Number(this.form.get('amount').value.replace(',','.').substring(1).trim()) < 0.01) {
      this.presentAlert();
      return;
    }
    this.navCtrl.navigateRoot('payment/confirm/' + this.cnumber + '/' + this.form.get('amount').value.substring(1).trim());
  }

  cancel() {
    this.navCtrl.navigateRoot('payment');
  }


       //const NUMBER_REGEXP = /^(\d+)(,2})?€/;
    /* public onKeyUp(event: any) {
         let newValue = event.target.value;
         let regExp = new RegExp(this.NUMBER_REGEXP);

         if (!regExp.test(newValue)) {
           event.target.value = newValue.slice(0,-1);
         }
       }*/

}

Test -1 在这个输入中，它只允许点取决于 numberMask 但点是默认的。我不能输入小数点。

<input currencyMask formControlName="amount" [textMask]="{mask:numberMask}" type ="text" placeholder="€  " />
       

Test-2 在这种情况下，两者都允许，但我不能像这样输入数字 例如 111.22 --> 结果 (11.22) 或 20,11 --> 结果 (0,11)

<input currencyMask formControlName="amount" type ="text" placeholder="€  " />

如何制作允许两个符号的货币格式管道？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）