如何在 Angular 中添加动态正则表达式模式答案

【问题标题】：How to add Dynamic regex pattern in Angular如何在 Angular 中添加动态正则表达式模式
【发布时间】：2021-04-13 22:28:17
【问题描述】：

如何在角度中添加动态变量正则表达式模式

预期输出

123456.1

点前最多6位，点后最多一位

import { Directive, ElementRef, HostListener, Input } from '@angular/core';
@Directive({
  selector: '[nNumberDigitDecimal]'
})
export class NNumberDigitDecimalDirective {
@Input() decimalDigit:number;
@Input() integerDigit:number;

  private regex: RegExp;
  private specialKeys: Array<string> = ['Backspace', 'Tab', 'End', 'Home', 'ArrowLeft', 'ArrowRight', 'Del', 'Delete'];
  constructor(private el: ElementRef) {
    console.log(this.decimalDigit);
  }
  @HostListener('keydown', ['$event'])
  onKeyDown(event: KeyboardEvent) {

    this.regex = new RegExp(/^\d{0,this.integerDigit}\.?\d{0,this.decimalDigit}$/g);
  
    if (this.specialKeys.indexOf(event.key) !== -1) {
      return;
    }
    let current: string = this.el.nativeElement.value;
    const position = this.el.nativeElement.selectionStart;
    const next: string = [current.slice(0, position), event.key == 'Decimal' ? '.' : event.key, current.slice(position)].join('');
    if (next && !String(next).match(this.regex)) {
      event.preventDefault();
    }
  }
}

【问题讨论】：

标签： angular angular6 angular8 angular-directive angular9

【解决方案1】：

你需要使用字符串而不是直接使用正则表达式：

RegExp(`^\d{0,${this.integerDigit}}\.?\d{0,${this.decimalDigit}}$`,'g');

【讨论】：

【解决方案2】：

终于找到答案了

@Directive({
  selector: 'input[numbersOnly]'
})
export class NumberDirective {
@Input() decimalDigit:number;

  private regex:RegExp;
  private specialKeys: Array<string> = ['Backspace', 'Tab', 'End', 'Home', 'ArrowLeft', 'ArrowRight', 'Del', 'Delete'];
  constructor(private el: ElementRef) {
    this.decimalDigit =1;
  }
  @HostListener('keydown', ['$event'])
  onKeyDown(event: KeyboardEvent) {
      this.regex=new RegExp('^\\d*\\.?\\d{0,'+this.decimalDigit+'}$','g');
    if (this.specialKeys.indexOf(event.key) !== -1) {
      return;
    }
    let current: string = this.el.nativeElement.value;
    current= current+event.key;
    if (this.regex.test(current)===false) {
       event.preventDefault();
    }
  }
}

【讨论】：