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

Question

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

我深入搜索了信用卡输入，允许用户插入 16 位数字并在数字之间输入“-”或空格，但所有结果都是针对 JavaScript 等的。 是否有 Angular 方法可以做到这一点？ 如果您有任何示例，请分享。

原文由 devmrh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

遍历信用卡号并手动添加空格

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

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

唯一棘手的部分是处理退格键和光标位置编辑（即，如果用户在输入内部单击以对其进行编辑）。如果我们不处理这个问题，循环将使编辑数字成为一个奇怪的用户体验问题。

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

以下是我在应用程序的支付组件中的操作方式：

• 创建一个名为 partitions 的变量来处理间距格式。 Amex 将其设置为 4-6-5，所有其他卡的默认设置为 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 标准 进行比较。）

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

 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 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这些是非常流行的信用卡 Angular 包：

1. 角度信用卡
2. angular-cc-库

原文由 Narm 发布，翻译遵循 CC BY-SA 4.0 许可协议