I'm trying to create a custom directive for an input field (textbox) such that it accepts only numbers and not alphabetical characters.
I have the following (only-numbers.directive.ts) file:
import { Directive, ElementRef, HostListener } from '@angular/core';
@Directive({
selector: "[onlyNumbers]"
})
export class OnlyNumbersDirective {
constructor(private el: ElementRef) {}
@HostListener('keydown', ['$event'])
onKeyDown(e: KeyboardEvent) {
if (
// Allow: Delete, Backspace, Tab, Escape, Enter
[46, 8, 9, 27, 13].indexOf(e.keyCode) !== -1 ||
(e.keyCode === 65 && e.ctrlKey === true) || // Allow: Ctrl+A
(e.keyCode === 67 && e.ctrlKey === true) || // Allow: Ctrl+C
(e.keyCode === 86 && e.ctrlKey === true) || // Allow: Ctrl+V
(e.keyCode === 88 && e.ctrlKey === true) || // Allow: Ctrl+X
(e.keyCode === 65 && e.metaKey === true) || // Cmd+A (Mac)
(e.keyCode === 67 && e.metaKey === true) || // Cmd+C (Mac)
(e.keyCode === 86 && e.metaKey === true) || // Cmd+V (Mac)
(e.keyCode === 88 && e.metaKey === true) || // Cmd+X (Mac)
(e.keyCode >= 35 && e.keyCode <= 39) // Home, End, Left, Right
) {
return; // let it happen, don't do anything
}
// Ensure that it is a number and stop the keypress
if (
(e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) &&
(e.keyCode < 96 || e.keyCode > 105)
) {
e.preventDefault();
}
}
}
The code above works fine but I knew that the "keyCode" is deprecated, so I try to use "key" instead but I got this errors:
Argument of type 'string' is not assignable to parameter of type 'number'. (screenshot)
So my question is how do I fix it?
Thanks in advance
