wizard999
10/14/2019 - 3:39 AM

integerOnly directive

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

@Directive({
    selector: '[integerOnly]'
})

export class IntegerOnlyDirective {
    //allow integer values only
    private regex: RegExp = new RegExp(/^[1-9]\d*$/g);
    //allow key codes for special events
    private specialKeys: Array<string> = ['Backspace', 'Tab', 'End', 'Home'];


    constructor(private el: ElementRef) {
        
    }
    @HostListener('keydown', ['$event'])
    onkeydown(event: KeyboardEvent) {
        //allow backspace, tab, end and home keys
        if (this.specialKeys.indexOf(event.key) !== -1) {
            return;
        }

        let current: string = this.el.nativeElement.value;
        let next: string = current.concat(event.key);
        if (next && !String(next).match(this.regex)) {
            event.preventDefault();
        }
    }
}