Angular Directive로 입력된 숫자 구분

프로젝트에 신용 카드 번호를 입력하기 위한 입력 태그가 있고 더 나은 가독성을 위해 입력된 번호를 몇 자리 숫자로 구분하려고 한다고 상상해 보십시오.
Angular의 명령을 사용하여 다음과 같이 작성합니다.

먼저 사용자가 숫자, 화살표 및 백스페이스만 입력할 수 있도록 하는 지시문을 만듭니다.

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

@Directive({
  selector: '[appOnlyNumber]',
})
export class NumberDirective {
  constructor() {}

  @HostListener('keydown', ['$event'])
  onKeyDown(event) {
    const charCode = event.which ? event.which : event.keyCode;

    if (
      (charCode >= 48 && charCode <= 57) ||
      (charCode >= 96 && charCode <= 105) ||
      (charCode >= 37 && charCode <= 40) ||
      charCode == 8 ||
      charCode == 16
    ) {
      return true;
    }

    return false;
  }
}

그런 다음 기본 지시문에 씁니다. 이 지시문은 'keyup' 이벤트 동안 명령을 실행합니다.
이 지시문에는 두 개의 입력이 있는데 하나는 '신용카드의 모든 숫자'에 대한 것이고 다른 하나는 구분할 '자릿수'에 대한 것입니다.

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

@Directive({
  selector: '[appDigiSeperator]',
})
export class DigiSeperatorDirective {
  @Input()
  detachableDigit: number;
  @Input()
  totalFigures: number;

  @HostListener('keyup', ['$event'])
  onKeyDown(event) {
    let enteredNumber = 
        this.check_number_not_longer_than_total_figure(
            this.remove_space_from_numbers(event.target.value)
        );

    const categorizedNumbers = [];

    for (
      let index = 0;
      index < enteredNumber.length;
      index += this.detachableDigit
    ) {
      const seperatedDigit = this.substring_numbers_by_digit(
        enteredNumber,
        index,
        this.detachableDigit
      );

      categorizedNumbers.push(seperatedDigit);
    }

    event.target.value = this.join_categorized_numbers(categorizedNumbers);
  }

  private remove_space_from_numbers(numbers: string) {
    return numbers.replace(/\s/g, '');
  }

  private check_number_not_longer_than_total_figure = (numbers: string) => {
    if (numbers.length > this.totalFigures) {
      return numbers.slice(0, this.totalFigures);
    }

    return numbers;
  };

  private substring_numbers_by_digit(
    numbers: string,
    startIndex: number,
    endIndex: number
  ) {
    return numbers.substring(startIndex, startIndex + endIndex);
  }

  private join_categorized_numbers(categorizedNumbers: number[]) {
    return categorizedNumbers.join(' ');
  }
}

이제 귀하의 구성 요소에서 사용하십시오

<input
  type="text"
  appOnlyNumber
  appDigiSeperator
  [detachableDigit]="4"
  [totalFigures]="16"
  [(ngModel)]="data"
/>

다음은 완전한 코드입니다!
See complete code