Angular Directive Regex Alphanumeric Validation - regex

Question

I'm kinda new to Angular and Regex and I'm currently stuck with a problem. I need to create an Angular Directive that allows an input field to do the following:
Alphanumeric only
First input must be a letter
One space only between words
No special character
I've done numbers 1-3 my problem comes in #4. The input still accepts '_' , '`', '&', 'ˆ' and some other special characters. I just need to negate all special characters.
Here is my directive:
export class AlphaNumericFieldDirective{
private regex: RegExp = new RegExp(/^[a-zA-Z]([a-zA-Z0-9]+ ?)*$/);
private specialKeys: Array<string> = ['Backspace', 'Space', 'Tab', 'End', 'Home'];
constructor(private el: ElementRef) {}
#HostListener('keydown', ['$event'])
onKeyDown(event: KeyboardEvent) {
if (this.specialKeys.indexOf(event.key) !== -1) {
return;
}
let current: string = this.el.nativeElement.value;
let next: string = current.concat(event.key);
if (next && !String(next).match(this.regex)) {
event.preventDefault();
}
}
}
And here is the sample output featuring some of the characters I want to negate
I would appreciate the help, thanks

Answer 1

This solution is working for me.
import { Directive, HostListener } from "#angular/core";
#Directive({
selector: "[appAlphabetOnly]",
})
export class AlphabetOnlyDirective {
#HostListener("keydown", ["$event"]) public onKeydown(event: KeyboardEvent) {
if (
(event.keyCode >= 15 && event.keyCode <= 64) ||
event.keyCode >= 123 ||
(event.keyCode >= 96 && event.keyCode <= 105)
) {
event.preventDefault();
}
}
}