![](/img/trans.png)
[英]Restricting Input to numbers only(-100.00 to 100.00) in a HTML input field
[英]Directive to limit decimal numbers to 100.00 max in text input (Regex)
我有一个指令,它是限制文本输入以在文本输入中仅写十进制数
这是指令代码
import { HostListener, Directive, ElementRef } from '@angular/core';
@Directive({
exportAs: 'decimal-number-directive',
selector: 'decimal-number-directive, [decimal-number-directive]',
})
export class DecimalNumberDirective {
private regex: RegExp = new RegExp(/^\d*\.?\d{0,2}$/g);
private specialKeys: string[] = ['Backspace', 'Tab', 'End', 'Home'];
constructor(private el: ElementRef) {}
@HostListener('keydown', ['$event'])
onKeyDown(event: KeyboardEvent): void {
if (this.specialKeys.indexOf(event.key) !== -1) {
return;
}
const current: string = this.el.nativeElement.value;
const next: string = current.concat(event.key);
if (next && !String(next).match(this.regex)) {
event.preventDefault();
}
}
}
这是我使用它的地方
<div class="col-2 pr-0">
<label>{{ l('Percent') }}</label>
<input
class="form-control"
type="text"
decimal-number-directive
name="percent"
[(ngModel)]="inquiryItemToAdd.percent"
maxlength="64"
(ngModelChange)="setTotalPrice()"
[readOnly]="!inquiryItemToAdd.servicePriceId || !servicePrice.isPriceCalculated"
/>
</div>
但是我可以写例如155.00或155.56。 我需要将其限制为100.00,因为我用它来写百分比。
我尝试使用此正则表达式private regex: RegExp = new RegExp(/^(\\d{1,2}(\\.\\d{1,2})?)|(100(\\.0{1,2})?)$/g);
但我仍然可以使用150%。
我该如何解决这个问题?
试用以下正则表达式。
^:-它将检查始终以100开头的字符串
[0] {2}:-将检查之后.
只能有2个零。
private regex: RegExp = /^100\.[0]{2}/gm;
您可以在此检查结果 。
它应匹配从0、0.0、0.00到100、100.0、100.00的所有正数
正则表达式 :
^(\d{1,2}|\d{1,2}\.\d{1,2}|100\.[0]{1,2}|100)$
https://regex101.com/r/S9fbY7/3
更新 :
您需要允许。 因为键入50.
是一个无效模式,但是50.8
是有效模式,但是每次击键都会验证整个正则表达式,因此您需要在时更新代码绕过验证.
按下不执行任何操作,然后模糊处理(如果值以点结尾),则可能会删除值或删除点或在点后添加00
忽略的键:
private specialKeys: string[] = ['Backspace', 'Tab', 'End', 'Home', '.'];
在模糊上,您要验证以结尾的值.
。 请注意根据您的用例选择任一选项。
if (val.endsWith('.')) {
// Option 1 strip the . (dot)
this.el.nativeElement.value = val.substring(0, val.length - 1);
// Option 2 add 00 after the . (dot)
this.el.nativeElement.value = val + '00';
// Option 3 remove the value all together
this.el.nativeElement.value = '';
}
最终代码 :
import { HostListener, Directive, ElementRef } from '@angular/core';
@Directive({
exportAs: 'decimal-number-directive',
selector: 'decimal-number-directive, [decimal-number-directive]',
})
export class DecimalNumberDirective {
private regex: RegExp = new RegExp(/^(\d{1,2}|\d{1,2}\.\d{1,2}|100\.[0]{1,2}|100)$/g);
private specialKeys: string[] = ['Backspace', 'Tab', 'End', 'Home', '.'];
constructor(private el: ElementRef) { }
@HostListener('keydown', ['$event'])
onKeyDown(event: KeyboardEvent): void {
if (this.specialKeys.indexOf(event.key) !== -1) {
return;
}
const current: string = this.el.nativeElement.value;
const next: string = current.concat(event.key);
if (next && !String(next).match(this.regex)) {
event.preventDefault();
}
}
@HostListener('blur', [])
onBlur(): void {
const val = this.el.nativeElement.value;
if (val.endsWith('.')) {
this.el.nativeElement.value = val.substring(0, val.length - 1); // Option 1 strip the .
// this.el.nativeElement.value = val + '00'; // Option 2 add 00 after the .
// this.el.nativeElement.value = ''; // Option 3 remove the value all together
}
}
}
我想这种模式会起作用:^(\\ d {0,2}(。\\ d {1,2})?| 100(.00?)?)$
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.