无法以 angular 反应形式执行信用卡格式化

Question

我正在尝试执行信用卡验证器，即在每四位数字后添加 space，例如 1111 1111 1111 1111。但不知何故我无法完成工作。

这是我试过的。

提前致谢

html

<ion-item>
    <ion-label position="floating">Card number</ion-label>
    <ion-input  type ="tel" formControlName = "cardnumber" keypress ="cc_format($evet)" ></ion-input>
</ion-item>

ts

cc_format(value) {
    var v = value.replace(/\s+/g, '').replace(/[^0-9]/gi, '')
    var matches = v.match(/\d{4,16}/g);
    var match = matches && matches[0] || ''
    var parts = []
    for (let i=0, len=match.length; i<len; i+=4) {
      parts.push(match.substring(i, i+4))
    }
    if (parts.length > 0) {
      return parts.join(' ')
    } else {
      return value
    }
  }

Answer 1

首先让我们使用 ionChange 从您的输入中获取更改后的值。将您的输入与 ts 文件中定义的 creditCardNumber 连接起来。现在转换信用卡号并将其添加到动态变量中。

<ion-item>
    <ion-label position="floating">Card number</ion-label>
    <ion-input  type ="tel" formControlName="cardnumber" (ionChange)="cc_format($event.target.value)" [(ngModel)]="creditCardNumber"></ion-input>
</ion-item>

creditCardNumber: string;

cc_format(value: string) {
    const v = value.replace(/\s+/g, '').replace(/[^0-9]/gi, '');
    const matches = v.match(/\d{4,16}/g);
    const match = (matches && matches[0]) || '';
    const parts = [];
    for (let i = 0, len = match.length; i < len; i += 4) {
      parts.push(match.substring(i, i + 4));
    }
    if (parts.length > 0) {
      this.creditCardNumber = parts.join(' ');
    } else {
      this.creditCardNumber = value;
    }
  }

无法以 angular 反应形式执行信用卡格式化

Can't perform credit card formatting in angular reactive form

ionic4

angular8