Angular：如何进行信用卡输入？

Question

我希望保持输入容量为16个数字，并在每组4个数字之间插入空格。

我进行了深入的搜索，寻找一种允许用户输入16位数字并在数字之间输入“ - ”或空格的信用卡输入框，但所有结果都是针对JavaScript等语言的。 有没有Angular的方法可以实现这个功能？ 如果您有任何示例，请分享。

- devmrh

---

如果您发现其中一个提供的解决方案最佳，也许您可以将其标记为解决方案？ - Tony Brasunas

Answer 1

这些是与信用卡相关的热门Angular包:

1. angular-credit-cards
2. angular-cc-library

请注意，这些包需要在Angular项目中使用，并提供了方便的功能来处理信用卡信息。

- Narm

---

选项1适用于AngularJS，选项2适用于Angular 2+。 - alexOtano

angular-cc-library在信用卡号输入时没有maxLength属性吗？当它检测到Visa卡时，会多出3个数字。 - Snowbases

Answer 2

循环信用卡号并手动添加空格

这适用于Angular 7+和可能更早的版本。

我们可以循环遍历数字，并为大多数信用卡类型每四个数字添加一个空格，但对于美国运通卡，则采用4-6-5的模式。

唯一棘手的部分是处理删除和光标位置编辑（即如果用户单击输入框内进行编辑）。如果我们不处理此问题，循环将使编辑数字成为一个奇怪的UX头痛。

您可以为此编写自定义组件或指令，但如果您的应用程序中只有一个组件正在接受信用卡号码，那么无需这样做，这通常是情况。 （如果您的应用程序中有多个信用卡输入，请将此代码放入指令中。）

以下是我在我的应用程序的付款组件中执行此操作的方法：

创建一个名为partitions的变量来处理间隔格式。将其设置为4-6-5以适用于Amex卡，对于所有其他卡片，默认设置为4-4-4-4。我们将循环遍历这些分区，添加空格。 使用模板引用变量#ccNumber来检测光标位置。 为了处理退格和光标箭头键，我们存储原始光标位置，并在从字符串结尾之外的任何位置进行编辑后恢复它。

  /* Insert spaces to enhance legibility of credit card numbers */
  creditCardNumberSpacing() {
    const input = this.ccNumberField.nativeElement;
    const { selectionStart } = input;
    const { cardNumber } = this.paymentForm.controls;

    let trimmedCardNum = cardNumber.value.replace(/\s+/g, '');

    if (trimmedCardNum.length > 16) {
      trimmedCardNum = trimmedCardNum.substr(0, 16);
    }

     /* Handle American Express 4-6-5 spacing */
    const partitions = trimmedCardNum.startsWith('34') || trimmedCardNum.startsWith('37') 
                       ? [4,6,5] 
                       : [4,4,4,4];

    const numbers = [];
    let position = 0;
    partitions.forEach(partition => {
      const part = trimmedCardNum.substr(position, partition);
      if (part) numbers.push(part);
      position += partition;
    })

    cardNumber.setValue(numbers.join(' '));

    /* Handle caret position if user edits the number later */
    if (selectionStart < cardNumber.value.length - 1) {
      input.setSelectionRange(selectionStart, selectionStart, 'none');
    }
  }

如果你已经有自己的例程来检测美国运通卡号，请使用它。这里我所使用的仅仅是检查前两位数字并将其与PAN/IIN standards进行比较。

在你的组件中，确保你有正确的导入:

import { ViewChild, ElementRef } from '@angular/core';

而且：

  @ViewChild('ccNumber') ccNumberField: ElementRef;

当你设置表单控件时，要这样做，以便可以在正则表达式模式中包含空格：

this.paymentForm = this.fb.group({
  cardNumber: ['', [Validators.required, Validators.pattern('^[ 0-9]*$';), Validators.minLength(17)]]
})

最后，在您的模板中，将您的元素配置为以下内容：

    <input maxlength="20"
        formControlName="cardNumber"
        type="tel"
        #ccNumber
        (keyup)="creditCardNumberSpacing()">

你应该可以使用了。用户输入数字时，空格会自动出现，如果他们打错了，仍然可以回去编辑。

PS：如果您想使用破折号（-）格式化，将cardNumber.setValue(numbers.join(' '))行中的空格替换为破折号，并在正则表达式调整中进行替换。

- Tony Brasunas

Answer 3

您可以为此创建自定义表单控件类。

import { FormControl } from '@angular/forms';

export class CardNumberFormControl extends FormControl{
    setValue(value: string | null, options: any) {
        if(!value){
            super.setValue('', {...options, emitModelToViewChange:true});
            return;
        }
        if(value.match(/[^0-9|\-]/gi)){
            super.setValue(this.value, {...options, emitModelToViewChange: true});
            return;
        }
        if(value.length>19){
            super.setValue(this.value, {...options, emitModelToViewChange:true});
            return;
        }
        if((value.length === 4 && this.value.length === 5) || (value.length === 9 && this.value.length === 10) || (value.length === 14 && this.value.length === 15)){
            super.setValue(value, {...options, emitModelToViewChange: true});
            return;
        }
        if(value.length === 4 || value.length === 9 || value.length === 14){
            super.setValue(value + '-', {...options, emitModelToViewChange: true});
            return;
        }
        super.setValue(value, {...options, emitModelToViewChange: true});
    }
}

最后一个if语句的意思是在第4个字符后插入“-”，但你也可以每隔4个字符插入。

- Tristan Berger