Tuesday 4 January 2022

Two Digit Decimal Numbers Directive

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


@Directive({

  selector: '[appTwoDigitDecimaNumberModule]'

})

export class TwoDigitDecimaNumberModuleDirective {


  private regex: RegExp = new RegExp(/^\d*\.?\d{0,2}$/g);

  private specialKeys: Array<string> = ['Backspace', 'Tab', 'End', 'Home', '-', 'ArrowLeft', 'ArrowRight', 'Del', 'Delete'];


  constructor(private el: ElementRef) {

  }

  @HostListener('keydown', ['$event'])

  onKeyDown(event: KeyboardEvent) {

    console.log(this.el.nativeElement.value);

    if (this.specialKeys.indexOf(event.key) !== -1) {

      return;

    }

    let current: string = this.el.nativeElement.value;

    const position = this.el.nativeElement.selectionStart;

    const next: string = [current.slice(0, position), event.key == 'Decimal' ? '.' : event.key, current.slice(position)].join('');

    if (next && !String(next).match(this.regex)) {

      event.preventDefault();

    }

  }


}


PostedBy:pankaj_bhakre

No comments:

Post a Comment