Не удается выполнить форматирование кредитной карты в реактивной форме angular

Question

Я пытаюсь выполнить проверку кредитной карты, то есть добавление пробела после каждого четвертого ди git, например, 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>

ц

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, чтобы получить измененное значение из вашего ввода. Соедините ваш ввод с creditCardNumber, определенным в файле ts. Теперь преобразуйте номер кредитной карты и добавьте его в переменную Dynami c.

<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;
    }
  }