Backspace with american express or diners club stop and keep first 2 digits

[almothafar]

When you use American card number start with 37 or 377 or diners club with 36 as for example, and erase it using backspace, it does not work on until the end, it stuck on undeletable 37 or 377.

[nogorilla]

@almothafar do you have an example number that I can test with? I'm using test numbers from paypal and stripe and cannot recreate your issue

[almothafar]

@nogorilla those cards must produce the issue, or you type number or copy/paste? I'm just typing the card number by number, not copy/paste.

I got the code and fixed the formatBackCardNumber(e) method with adding an extra condition:

    if (/\d\s+$/.test(value)) {
      e.preventDefault();
      setTimeout(() => {
        this.target.value = value.replace(/\d\s+$/, '');
      });
    } else if (/\s\d$/.test(value)) {
      e.preventDefault();
      setTimeout(() => {
        this.target.value = value.replace(/\s\d$/, '');
      });
    } else if (/\s\d?$/.test(value)) {
      e.preventDefault();
      setTimeout(() => {
        this.target.value = value.replace(/\s$/, '');
      });
    }

The problem seems when I type 37 the card got extra space after until I type another number, like 377 then the issue stay when I try to "backspace" the space removed then added again.

Also, I removed @HostListener('paste', ['$event']) and @HostListener('change', ['$event']) because got issues with auto refill from browser and with copy/pase.

Also, I removed them because "Tab" button was not working, when I click tab to switch to next filed it returned me to the first field with an invalid card and I stuck, the problem was in Safari in macOS.