Angular 指令正则表达式字母数字验证

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:

1. Alphanumeric only
2. First input must be a letter
3. One space only between words
4. 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();
        }
    }
}