輸入掩碼通過指令

Question

我想輸入遵循以下格式：

[00-23]:[00-59] 

我們使用角2.4，所以我們沒有可用的pattern指令，我不能使用外部庫（primeNG）。

所以我想做一個指令爲：

@HostListener('keyup', ['$event']) onKeyUp(event) { 
    var newVal = this.el.nativeElement.value.replace(/\D/g, ''); 
    var rawValue = newVal; 
    // show default format for empty value 
    if(newVal.length === 0) { 
     newVal = '00:00'; 
    } 
    // don't show colon for empty groups at the 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 the new value 
    this.el.nativeElement.value = newVal; 
} 

這適用於第2位我進入。

開始字符串：

00:00 

按下小鍵盤上的1：

00:01 

按下小鍵盤2：

00:12 

但在第三位，我得到：

00:123 

代替01:23和00:1234代替12:34

Backspace鍵按預期工作。

是否有解決這個問題只使用指令？

Answer 1

在最後rejex嘗試replace(/^(\d{0,2})(\d{0,2})/g, '$1:$2')。希望這會有所幫助。