我正在使用Ionic / Angular用于混合应用程序和表单,我试图将输入字段数量限制为最多两位小数。但是,以下代码仅允许输入完整数字。
<ion-input ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/" step="0.01" type="number" (keypress)="validateNumber($event)" placeholder="{{ 'Price_in_CHF' | translate }}" [(ngModel)]="productPrice"></ion-input>
validateNumber(event: any) {
let input = String.fromCharCode(event.charCode);
const reg = /^[0-9]+(\.[0-9]{1,2})?$/;
if (!reg.test(input)) {
event.preventDefault();
}
}
您可以创建自定义指令
import { Directive, ElementRef, HostListener, Input } from '@angular/core';
@Directive({
selector: '[appTwoDigitDecimaNumber]'
})
export class TwoDigitDecimaNumberDirective {
private regex: RegExp = new RegExp(/^\d*\.?\d{0,2}$/g);
private specialKeys: Array<string> = ['Backspace', 'Tab', 'End', 'Home', '-'];
@Input('appTwoDigitDecimaNumber') decimal:any;
constructor(private el: ElementRef) {
}
@HostListener('keydown', ['$event'])
onKeyDown(event: KeyboardEvent) {
// Allow Backspace, tab, end, and home keys
if(this.decimal){
if (this.specialKeys.indexOf(event.key) !== -1) {
return;
}
let current: string = this.el.nativeElement.value;
let next: string = current.concat(event.key);
if (next && !String(next).match(this.regex)) {
event.preventDefault();
}
}else{
const charCode = (event.which) ? event.which : event.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 105)) {
event.preventDefault();
}
return;
}
}
用法
<input type="text" [appTwoDigitDecimaNumber]="true">
我希望它能帮到你很多。
注意:您可以使用任何number
类型字段,如果您不想使用,只需添加[appTwoDigitDecimaNumber]="true"
,然后添加[appTwoDigitDecimaNumber]="false"
。因为我在动态形式中使用这些指令,为什么我将它设置在true
或false
上。你也可以在Dynamic form
中使用它
用以下正则表达式替换您的代码
reg = /^[0-9]{1,2}$/;
希望对你有所帮助!