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

Question

如何在角度中添加动态变量regex模式

预期输出

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();
}
}
}

Answer 1

您需要使用字符串而不是直接使用regex:

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

Answer 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();
}
}
}