Angular 将输入字段限制为两位小数

我在混合应用程序中使用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>

---

您可以创建自定义指令

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

import{Directive，ElementRef，HostListener，Input}来自“@angular/core”；
@指示({
选择器：“[appTwoDigitDecimaNumber]”
})
导出类TwoDigitDecimaNumberDirective{
私有regex:RegExp=newregexp（/^\d*\.？\d{0,2}$/g）；
private specialKeys:Array=['Backspace'，'Tab'，'End'，'Home'，'-']；
@输入（'appTwoDigitDecimaNumber'）十进制：任意；
构造函数（专用el:ElementRef）{
}
@HostListener（'keydown'，['$event']））
onKeyDown（事件：KeyboardEvent）{
//允许使用退格键、制表符键、结束键和主控键
如果（这个十进制数）{
if（this.specialKeys.indexOf（event.key）！=-1）{
返回；
}
让当前值：string=this.el.nativeElement.value；
let next:string=current.concat（event.key）；
if（next&&！String（next）.match（this.regex））{
event.preventDefault（）；
}
}否则{
const charCode=（event.which）？event.which:event.keyCode；
如果（字符码>31&（字符码<48 | |字符码>105））{
event.preventDefault（）；
}
返回；
}
}

用法

<input type="text" [appTwoDigitDecimaNumber]="true">

我希望这会对你有很大帮助

注意：您可以在需要使用的任何

number

类型字段中使用它，只需添加

[appTwoDigitDecimaNumber]=“true”

，如果您不想使用，则添加

[appTwoDigitDecimaNumber]=“false”

。 因为我在动态形式中使用了这些指令，所以我将其设置为基于

true

或

false

。

---

您可以在

动态表单

中使用它

也可以创建自定义指令

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

import{Directive，ElementRef，HostListener，Input}来自“@angular/core”；
@指示({
选择器：“[appTwoDigitDecimaNumber]”
})
导出类TwoDigitDecimaNumberDirective{
私有regex:RegExp=newregexp（/^\d*\.？\d{0,2}$/g）；
private specialKeys:Array=['Backspace'，'Tab'，'End'，'Home'，'-']；
@输入（'appTwoDigitDecimaNumber'）十进制：任意；
构造函数（专用el:ElementRef）{
}
@HostListener（'keydown'，['$event']））
onKeyDown（事件：KeyboardEvent）{
//允许使用退格键、制表符键、结束键和主控键
如果（这个十进制数）{
if（this.specialKeys.indexOf（event.key）！=-1）{
返回；
}
让当前值：string=this.el.nativeElement.value；
let next:string=current.concat（event.key）；
if（next&&！String（next）.match（this.regex））{
event.preventDefault（）；
}
}否则{
const charCode=（event.which）？event.which:event.keyCode；
如果（字符码>31&（字符码<48 | |字符码>105））{
event.preventDefault（）；
}
返回；
}
}

用法

<input type="text" [appTwoDigitDecimaNumber]="true">

我希望这会对你有很大帮助

注意：您可以在需要使用的任何

number

类型字段中使用它，只需添加

[appTwoDigitDecimaNumber]=“true”

，如果您不想使用，则添加

[appTwoDigitDecimaNumber]=“false”

。 因为我在动态形式中使用了这些指令，所以我将其设置为基于

true

或

false

。

---

您可以在

动态表单中使用它

，也可以用以下正则表达式替换代码

reg = /^[0-9]{1,2}$/;

---

我希望这对您有所帮助！

用以下正则表达式替换您的代码

reg = /^[0-9]{1,2}$/;

---

我希望对您有所帮助！

尝试使用step=“.01”而不是step=“0.01”。可能是@TestDPSjaksf的重复项，它仍然不起作用。它仅限于完整数字尝试使用step=“.01”而不是step=“0.01”。可能是@TestDPSjaksf的重复。它仍然不起作用。它仅限于完整数字。如果任何人在执行这些指令时遇到问题，请告诉我，我将随时准备帮助您。您好，谢谢您的回复。我尝试了您的指令，但看起来它不起作用。我没有收到任何错误，但输入框不受限制。您好，我知道ave create here stackblitz link it working fine check here你能在

app.module.ts中的
声明中导入它吗？
fileHi bhagwat tupe对不起，我在度假。但是，它仍然不工作，我无法访问你的stackblitz。这可能在Angular 2中不工作吗？@Varano检查这些，如果有任何一个A关于执行这些指令的问题，然后让我知道我将准备好帮助您您好，谢谢您的回复。我尝试了您的指令，但它似乎不起作用。我没有收到任何错误，但输入框不受限制您好，我已在此处创建stackblitz链接其工作正常检查此处您可以在
声明中导入它吗在
app.module.ts
fileHi bhagwat tupe抱歉，我在度假。但是，它仍然不起作用，我无法访问您的stackblitz。这是否可能在Angular 2中不起作用？@Varano检查这些