regex - Input mask through directive -

i want input follow following format:

[00-23]:[00-59] 

we use angular 2.4 don't have pattern directive available , cannot use external libraries (primeng).

so i'm trying make directive that:

@hostlistener('keyup', ['$event']) onkeyup(event) {     var newval = this.el.nativeelement.value.replace(/\d/g, '');     var rawvalue = newval;     // show default format empty value     if(newval.length === 0) {         newval = '00:00';     }      // don't show colon empty groups @ end     else if(newval.length === 1) {         newval = newval.replace(/^(\d{1})/, '00:0$1');     } else {         newval = newval.replace(/^(\d{2})(\d{2})/, '$1:$2');     }     // set new value     this.el.nativeelement.value = newval; } 

this works first 2 digits enter.

starting string:

00:00 

pressing numpad 1:

00:01 

pressing numpad 2:

00:12 

but on third digit get:

00:123 

instead of 01:23 , 00:1234 instead of 12:34

backspace works expected.

is there solution problem using directive?

in last rejex try replace(/^(\d{0,2})(\d{0,2})/g, '$1:$2'). hope help.