角度2のテキストボックスに間違った値を貼り付けるのを防ぐ方法を教えてください。

Question

私はユーザーがテキストボックスにhh：mmを入力できるようにするコントロールを作成しようとしています。 しかし、ユーザーが無効なテキストを貼り付けようとすると正しく動作しません。

ユーザーは非英数字を入力することはできませんが、彼らはまだそれを貼り付けることができます。

これは、これは私のngModelChangeイベント

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

であり、これは私のテキストボックスであるできる文字

@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(); 
    } 
} 

以外の任意の文字を入力してからユーザーを防ぐ私のホストのイベントです：

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

Answer 1

あなたのキーダウンで試してみてください方法：

onKeyDown(event: any) { 
    const e = event as KeyboardEvent; 
    var charCode = e.keyCode; 
    if (charCode > 31 && (charCode < 48 || charCode > 58)) { 
     return false; 
    } 
     return true; 
} 

これは数字と: charを入力することのみを許可します。それがあなたを助けることを願ってください。

Answer 2

トリガpasteイベント

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

コンポーネント：

onPaste(e: any) { e.preventDefault()}