Directive for accept only numeric + forward slash(/) + hyphen(-) in angular 2+

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

@Directive({
  selector: 'input[IpExchange]'
})
export class IpExchangeDirective {

  // Allow decimal numbers. The \. is only allowed once to occur
  private regex: RegExp = new RegExp(/^[0-9 \/-]+$/g);

  // Allow key codes for special events. Reflect :
  // Backspace, tab, end, home
  private specialKeys: Array<string> = [ 'Backspace', 'Tab', 'End', 'Home', 'ArrowLeft', 'ArrowRight','Delete'];
  
  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;
    }
    
    // Do not use event.keycode this is deprecated.
    // See: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode
    let current: string = this.el.nativeElement.value;
    // We need this because the current value on the DOM element
    // is not yet updated with the value from this event
    let next: string = current.concat(event.key);
    if (next && !String(next).match(this.regex)) {
      event.preventDefault();
    }
  }
}
<mat-form-field>
<mat-label>Customer IP No</mat-label>
   <input matInput IpExchange placeholder="Type Here ...">
</mat-form-field>

LEAVE A REPLY

Please enter your comment!
Please enter your name here