[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(' '); }