Validation 将输入类型编号限制为角度2的小数点后2位

我在html页面上有许多输入框。我想限制用户输入2位小数后的任何数字

目前尝试应用HTML5输入步骤=“0.00”，但不起作用

任何类型脚本解决方案也可以

<input type='number' step='0.01' value='0.00' placeholder='0.00' />

---

不要使用

Step

使用

Step

，如果您仍然想要旧浏览器的支持，您可以为相同的选择javascript代码。我使用@pipe获得了解决方案

import { Directive,Input,Inject, HostListener, ElementRef, OnInit } from "@angular/core";


const PADDING = "000000";

@Pipe({ name: "CurrencyPipe" })
export class CurrencyPipe implements PipeTransform {
  transform(value: any, args: string[]): any {
     var clean = value.replace(/[^-0-9\.]/g, '');
    var negativeCheck = clean.split('-');
    var decimalCheck = clean.split('.');

     if (negativeCheck[1] != undefined) {
                        negativeCheck[1] = negativeCheck[1].slice(0, negativeCheck[1].length);
                        clean = negativeCheck[0] + '-' + negativeCheck[1];
                        if (negativeCheck[0].length > 0) {
                            clean = negativeCheck[0];
                        }

                    }
        if (decimalCheck[1] != undefined) {
                        decimalCheck[1] = decimalCheck[1].slice(0, 2);
                        clean = decimalCheck[0] + '.' + decimalCheck[1];
                    }

    return clean;
  }

  parse(value: string, fractionSize: number = 2): string {

     var clean = value.replace(/[^-0-9\.]/g, '');
    var negativeCheck = clean.split('-');
    var decimalCheck = clean.split('.');

     if (negativeCheck[1] != undefined) {
                        negativeCheck[1] = negativeCheck[1].slice(0, negativeCheck[1].length);
                        clean = negativeCheck[0] + '-' + negativeCheck[1];
                        if (negativeCheck[0].length > 0) {
                            clean = negativeCheck[0];
                        }

                    }
        if (decimalCheck[1] != undefined) {
                        decimalCheck[1] = decimalCheck[1].slice(0, 2);
                        clean = decimalCheck[0] + '.' + decimalCheck[1];
                    }

    return clean;
  }

}

管道在我的指令中延伸

import { Directive, Input, Inject, HostListener, OnChanges, ElementRef, Renderer, AfterViewInit, OnInit } from "@angular/core";
import { CurrencyPipe } from '../../shared/pipe/orderby';

@Directive({ selector: "[CurrencyFormatter]" })
export class CurrencyFormatterDirective {

  private el: HTMLInputElement;

  constructor(
    private elementRef: ElementRef,
    private currencyPipe: CurrencyPipe
  ) {
    this.el = this.elementRef.nativeElement;
  }

  ngOnInit() {
    this.el.value = this.currencyPipe.parse(this.el.value);
  }

  @HostListener("focus", ["$event.target.value"])
  onFocus(value) {
    this.el.value = this.currencyPipe.parse(value); // opossite of transform
  }

  @HostListener("blur", ["$event.target.value"])
  onBlur(value) {
    this.el.value = this.currencyPipe.parse(value);
  }

  @HostListener("keyup", ["$event.target.value"]) 
  onKeyUp(value) {
    this.el.value = this.currencyPipe.parse(value);
  }



}

组件上的导入指令

import { CurrencyFormatterDirective } from '../../shared/directive/showOnRowHover';
import { CurrencyPipe } from '../../shared/pipe/orderby';
providers: [CurrencyPipe,
          CurrencyFormatterDirective]

在html输入上添加和指令

 <input type="text"  [(ngModel)]="invoiceDetail.InvoiceAmount" class="form-control"  placeholder="Enter invoice amount"
          CurrencyFormatter>

---

请参阅中的以下指令演示

您可以使用以下指令实现这一点：

import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
  selector: '[OnlyNumber]'
})
export class OnlyNumber {
  elemRef: ElementRef

  constructor(private el: ElementRef) {
    this.elemRef = el
  }

  @Input() OnlyNumber: boolean;
  @Input() DecimalPlaces: string;
  @Input() minValue: string;
  @Input() maxValue: string;

  @HostListener('keydown', ['$event']) onKeyDown(event) {
    let e = <KeyboardEvent> event;
    if (this.OnlyNumber) {
      if ([46, 8, 9, 27, 13, 110, 190].indexOf(e.keyCode) !== -1 ||
        // Allow: Ctrl+A
        (e.keyCode == 65 && e.ctrlKey === true) ||
        // Allow: Ctrl+C
        (e.keyCode == 67 && e.ctrlKey === true) ||
        // Allow: Ctrl+X
        (e.keyCode == 88 && e.ctrlKey === true) ||
        // Allow: home, end, left, right
        (e.keyCode >= 35 && e.keyCode <= 39)) {
          // let it happen, don't do anything
          return;
        }
        // Ensure that it is a number and stop the keypress
        if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
            e.preventDefault();
        }
      }
  }

  @HostListener('keypress', ['$event']) onKeyPress(event) {
    let e = <any> event

    let valInFloat: number = parseFloat(e.target.value)

    if(this.minValue.length) {
      // (isNaN(valInFloat) && e.key === "0") - When user enters value for first time valInFloat will be NaN, e.key condition is 
      // because I didn't want user to enter anything below 1.
      // NOTE: You might want to remove it if you want to accept 0
      if( valInFloat < parseFloat(this.minValue) || (isNaN(valInFloat) && e.key === "0") ) {
        e.preventDefault();
      }
    }

    if(this.maxValue.length) {
      if(valInFloat > parseFloat(this.maxValue)) {
        e.preventDefault();
      }
    }

    if (this.DecimalPlaces) {
      let currentCursorPos: number = -1;    
      if (typeof this.elemRef.nativeElement.selectionStart == "number") {
          currentCursorPos = this.elemRef.nativeElement.selectionStart;
      } else {
        // Probably an old IE browser 
        console.log("This browser doesn't support selectionStart");
      }

      let dotLength: number = e.target.value.replace(/[^\.]/g, '').length
      // If user has not entered a dot(.) e.target.value.split(".")[1] will be undefined
      let decimalLength = e.target.value.split(".")[1] ? e.target.value.split(".")[1].length : 0;

      // (this.DecimalPlaces - 1) because we don't get decimalLength including currently pressed character 
      // currentCursorPos > e.target.value.indexOf(".") because we must allow user's to enter value before dot(.)
      // Checking Backspace etc.. keys because firefox doesn't pressing them while chrome does by default
      if( dotLength > 1 || (dotLength === 1 && e.key === ".") || (decimalLength > (parseInt(this.DecimalPlaces) - 1) && 
        currentCursorPos > e.target.value.indexOf(".")) && ["Backspace", "ArrowLeft", "ArrowRight"].indexOf(e.key) === -1 ) {
        e.preventDefault();
      }
    }  
  }
}

import{Directive，ElementRef，HostListener，Input}来自“@angular/core”；
@指示({
选择器：“[OnlyNumber]”
})
仅导出类编号{
elemRef:ElementRef
构造函数（专用el:ElementRef）{
this.elemRef=el
}
@Input（）OnlyNumber:布尔值；
@Input（）小数位数：字符串；
@Input（）最小值：字符串；
@Input（）最大值：字符串；
@HostListener（'keydown'，['$event']）onKeyDown（event）{
设e=事件；
如果（此.OnlyNumber）{
if（[46,8,9,27,13,110,190]）.indexOf（e.keyCode）！=-1||
//允许：Ctrl+A
（e.keyCode==65&&e.ctrlKey==true）||
//允许：Ctrl+C
（e.keyCode==67&&e.ctrlKey==true）||
//允许：Ctrl+X
（e.keyCode==88&&e.ctrlKey==true）||
//允许：起始、结束、左、右
（e.keyCode>=35&&e.keyCode不限制用户输入超过2位小数。在Chrome（版本58.0.3029.110）上，Angular 2.4.0-小数位数检查不起作用（this.elemRef.nativeElement.selectionStart为空）。但实际上，neat指令不是这样。谢谢。我使用Angular 4.0.0和Chrome 57.0.2987.133（64位）在OS X El Capitan上。我修复了一个firefox bug，现在它也可以在firefox v53上运行。如果您发现问题，请随时提出编辑建议workaround@Dhyey如果你输入一个小数点数字，然后选择或突出显示小数点后的最后一个数字，并尝试用另一个数字替换它，那么它将不起作用此函数用于作为跨浏览器解决方案获取光标位置。到目前为止，它对我很有效：
var getCursorPosition=function（elem）{var pos=0；if（document.selection）{elem.focus（）；var sel=document.selection.createRange（）；sel.moveStart（'character'，-elem.value.length）；pos=sel.text.length；}else if（elem.selectionStart | | elem.selectionStart=='0'）{pos=elem.selectionStart；}返回pos；}
很抱歉，这种格式看起来很奇怪。注释不保留其格式。这很好，但我必须从core导入PipeTransform，并将管道作为提供程序添加到指令中以使其注入，并将其添加到模块的声明中
<input type="text" OnlyNumber="true" DecimalPlaces="2" minValue="1.00" maxValue="999999999.00">