在输入的第4位数字后添加空格

Question

我需要在输入的每第四个数字后添加一个空格，我正在控制台中获得它，如何在Angular 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

我建议您查看此指令

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

@Directive({
  selector: '[credit-card]'
})
export class CreditCardDirective {

@HostListener('input', ['$event'])
  onKeyDown(event: KeyboardEvent) {
    const input = event.target as HTMLInputElement;

    let trimmed = input.value.replace(/\s+/g, '');
    if (trimmed.length > 16) {
      trimmed = trimmed.substr(0, 16);
    }

    let numbers = [];
    for (let i = 0; i < trimmed.length; i += 4) {
      numbers.push(trimmed.substr(i, 4));
    }

    input.value = numbers.join(' ');

  }
}

并在html模板中用作

<input type="text" credit-card>

这里是source code

UPDATE：（10/10/2019）输入类型应仅为text（默认类型）

Answer 2

每四位数处理一次空格，同时正确处理退格，光标位置和美国运通] >>

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

这是我使用模板引用变量和光标位置检测在组件中进行的操作。

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

[对于美国运通，我使用一个名为partitions的变量来处理美国运通卡的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()">
您应该很好走！