I'm trying to create a control that that let user enter hh:mm in a text box. 
However, I'm not able to get it working correctly when user tries to paste the invalid text. 

Though the users are not able to type non alpha numeric character. They are still able to paste it. 

This is my host event that prevents user from typing any character other than *allowed characters*

```
@HostListener("keydown", ["$event"])
@HostListener("keyup", ["$event"])
onKeyDown(event: any) {
  let allowedCharacters = `^[0-9-:]*$`;
  const e = event as KeyboardEvent;
    if ([8, 9, 27, 13].indexOf(e.keyCode) !== -1 ||
        //Ctrl+A
        (e.keyCode === 65 && (e.ctrlKey || e.metaKey)) ||
        //Ctrl+C
        (e.keyCode === 67 && (e.ctrlKey || e.metaKey)) ||
        //Ctrl+V
        (e.keyCode === 86 && (e.ctrlKey || e.metaKey)) ||
        //Ctrl+X
        (e.keyCode === 88 && (e.ctrlKey || e.metaKey)) ||
        //home, end, left, right
        (e.keyCode >= 35 && e.keyCode < 39)) {
        return;
    }
    if (!String(e.key).match(allowedCharacters)) {
      event.preventDefault();
    }
}

```

This is my ngModelChange event

```
 onModelChange(value: any): void {
   this.myTextBoxValue= value;
}

```

And this is my textbox: 

```
<input type="text" [ngModel] = "myTextBoxValue" (ngModelChange)="onModelChange($event)" 

```