[Angular] Using directive to create a simple Credit card validator

We will use 'HostListener' and 'HostBinding' to accomplish the task.

 

The HTML:

      <label>
        Credit Card Number
        <input 
          name="credit-card" 
          type="text"
          credit-card
          placeholder="Enter your 16-digit card number">
      </label>

 

Create directive:

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

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

 

Add a HostListener when user type input:

And we want that the max length of string user type is 16 and it should be formatted as '6666 6666 6666 6666'.

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

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

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

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

 

Now we want to use @HostBinding to change style props when what user entered is not a number:

  onKeyDown(event: KeyboardEvent) {
    this.border = "";
    const input = event.target as HTMLInputElement;

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

    // if we pass in char, show red border
    if((/[^\d]/g).test(trimmed)) {
      this.border = '1px solid red';
    }

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

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