Angular自定义指令设置文本框只能输入数字

指令代码

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

@Directive({
  selector: '[inputnumber]',
  standalone: false
})
export class ValidNumberDirective {
  @Input('inputnumber') inputnumber: string;
  @Input('negative') negative: boolean = false;
  @Output() ngModelChange: EventEmitter<any> = new EventEmitter();
  inputnumberlength: number;
  decimal: number;
  value: number | string = '';
  lock: boolean = false;
  rex: RegExp;
  constructor(public el: ElementRef) {
    el.nativeElement.setAttribute('title', 'Only accept number.');
  }
  ngOnInit(): void {
    if (this.inputnumber.toString().indexOf(',') > -1) {
      let limit = this.inputnumber.toString().split(',');
      this.decimal = parseInt(limit[1] ?? 0);
      this.inputnumberlength = parseInt(limit[0] ?? 0) - this.decimal;
      this.rex = new RegExp(`^${this.negative ? "-?" : ""}\\d{1,${this.inputnumberlength}}(\\.\\d{0,${this.decimal}})?$`);
    } else {
      this.inputnumberlength = parseInt(this.inputnumber);
      this.rex = new RegExp(`^${this.negative ? "-?" : ""}\\d{0,${this.inputnumberlength}}$`);
    }
  }
  str = '';
  @HostListener('compositionstart', ['$event'])
  onCompositionStart(e: Event): void {
    this.str = this.el.nativeElement.value;
    this.lock = true;
  }
  @HostListener('compositionend', ['$event'])
  onCompositionEnd(e: Event): void {
    this.lock = false;
    this.el.nativeElement.value = this.str;
  }
  @HostListener('input', ['$event'])
  onInput(e: any): void {
    if (!this.lock) {
      let se = this.el.nativeElement.selectionEnd;
      if (!this.formatValve()) {
        this.el.nativeElement.value = this.value;
        if (se > 0 && e.inputType == 'insertText') {
          this.el.nativeElement.setSelectionRange(se - 1, se - 1);
        }
        else if (e.inputType == 'deleteContentBackward') {
          this.el.nativeElement.setSelectionRange(se, se);
        }
      }
    }
  }

  @HostListener('paste', ['$event']) OnPaste(e: any) {
    this.formatValve();
    return;
  }

  @HostListener('keydown', ['$event'])
  OnKeyDown(event: any) {
    this.value = this.el.nativeElement.value;
  }

  formatValve() {
    if (this.el.nativeElement.value == '' || (this.negative && this.el.nativeElement.value == '-')) return true;
    var arr = this.el.nativeElement.value.match(this.rex);
    return arr != null;
  }
  @HostListener('blur', ['$event'])
  onBlur($event: any) {
    this.ngModelChange.emit(this.el.nativeElement.value);
  }
}

调用

只允许输入6位，不允许输入小数 <input inputnumber="6"/>
只允许输入6位，小数点后6位的小数 <input inputnumber="12,6"/>
只允许输入正负6位，小数点后2位的小数 <input inputnumber="8,2" negative=true/>