Question

我需要在每输入4个数字后添加一个空格，我在控制台中得到这个，我怎样才能实现这个以改变角度5的输入

我在下面给出的代码.ts

  mychange(val) {
    const self = this;
    let chIbn = val.split(' ').join('');
    if (chIbn.length > 0) {
      chIbn = chIbn.match(new RegExp('.{1,4}', 'g')).join(' ');
    }
    console.log(chIbn);
    this.id = chIbn;
  }

HTML

<input class="customerno" (ngModelChange)="mychange($event)" [formControl]="inputFormControl" (keydown.backspace)="onKeydown($event)" maxlength="{{digit}}" (keyup)="RestrictNumber($event)" type="tel" matInput [(ngModel)]="id" placeholder="Customer No. ">

控制台

1
11
111
1111
1111 1
1111 11
1111 111
1111 1111
1111 1111 1
1111 1111 11
1111 1111 111
1111 1111 1111

注意：我从Angular 2 : add hyphen after every 4 digit in input , card number input改编它。但我改变了空间的宣传

Answer 1

我建议查阅本指令

html

并在您的<input type="text" credit-card>模板中使用

public static int compareParts(String a, String b) {
    String[] aa = a.split("#", 2), ba = b.split("#", 2);
    int c = aa[0].compareTo(ba[0]);
    return c != 0? c: Integer.compare(Integer.parseInt(aa[1]), Integer.parseInt(ba[1]));
}

这是 source code

Answer 2

每四位数处理一次空格，同时正确处理Backspace，光标位置和American Express

如果您只有一个使用信用卡号的组件，则不需要自定义指令，这是常见的情况。

这是我使用模板引用变量和光标位置检测在组件中完成的方法。

要处理退格键和光标箭头键，我们必须存储原始光标位置，并在从字符串末尾以外的任何位置进行编辑后将其恢复。

对于American Express，我使用一个名为partitions的变量来处理Amex的4-6-5间距格式和所有其他卡的4-4-4-4间距格式。我们在添加空格时遍历它们。

  /* Insert spaces to make CC number more legible */
  cardNumberSpacing() {
    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 format */
    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)="cardNumberSpacing()">

你应该很好！

Angular 5：在输入中每4位数后添加空格

2 个答案: