Angular自定义指令使用正则限制文本输入

指令

import { Directive, ElementRef, EventEmitter, HostListener, Input, Output } from '@angular/core';

@Directive({
  selector: '[inputlimitpattern]',
  standalone: false
})
export class InputLimitPatternDirective {
  @Input('inputlimitpattern') inputlimitpattern: string;
  @Output() ngModelChange: EventEmitter<any> = new EventEmitter();
  reg: RegExp;
  private isComposing: boolean = false; // Record the input status

  constructor(private el: ElementRef) {}

  ngOnInit(): void {
    //this.inputlimitpattern && (this.reg = new RegExp(this.inputlimitpattern, 'g'));
    //需要支持多语言字符的需要使用gu
    this.inputlimitpattern && (this.reg = new RegExp(this.inputlimitpattern, 'gu'));
  }

  @HostListener('compositionstart', ['$event'])
  onCompositionStart(event: Event): void {
    this.isComposing = true;
  }

  @HostListener('compositionend', ['$event'])
  onCompositionEnd(event: Event): void {
    this.isComposing = false;
    this.filterValue();
  }

  @HostListener('input', ['$event'])
  onInput(event: Event): void {
    if (!this.isComposing) {
      this.filterValue();
    }
  }

  @HostListener('blur', ['$event'])
  onBlur(event: Event): void {
    this.filterValue();
  }

  private filterValue(): void {
    const originalValue = this.el.nativeElement.value;
    const newValue = originalValue.replace(this.reg, '');
    this.el.nativeElement.value = newValue;
    this.ngModelChange.emit(this.el.nativeElement.value);
  }
}

调用页面

 只允许输入英文字符和空格 <input inputlimitpattern="[^A-Za-z\s]">
 只允许输入英文字符、数字和空格 <input inputlimitpattern="[^A-Za-z0-9\s]">
 只允许输入多语言字符、数字和空格 <input inputlimitpattern="[^\p{L}0-9\s]">
 只允许输入多语言字符、数字、斜杠、反斜杠和空格 <input inputlimitpattern="[^/\\\p{L}0-9\s]"> 
 反斜杠需要加转义，即\\并且放在字符的前面，不然会报错！！
 ...