Как предотвратитьDefault () в действии ввода HostListener

Я пытаюсь написать директиву, которая ограничивает пользователя вводить только числовые символы в поле ввода текста.

@Directive({
  selector: '[numericControl]'
})
export class NumericControlDirective {

    contructor(
        private el: ElementRef,
    ) {}

    @HostListener('input', ['$event'])
    onInput(e: any) {
        if (e.which < 48 || e.which > 57) {
            e.preventDefault();
        }
    }

}

Применение

<input type = "text" placeholder = "Volume" numericControl />

Но это не работает, кто-нибудь сталкивался с этой проблемой?