如何在Angular2/4/5中限制2位小数的输入框

Question

我有一个场景，我应该在 Angular 2/4/5 中限制一个小数点后两位的输入框。我应该为此编写指令吗？

示例：12.25、14524.21、12547896324.01

我们不应允许用户在完成两位十进制值后输入额外的击键

Answer 1

我宁愿为此使用验证器：

this.myReactiveForm = this._formBuilder.group({
  myNumber: ['', [Validators.pattern(/^\d*(?:[.,]\d{1,2})?$/)]]
});

Answer 2

试试这个正则表达式

/^\d*(?:[.,]\d{1,2})?$/

Answer 3

在您的 HTML 文件中添加以下代码 <label>Enter value</label> <br/> <input type="text" name="test" placeholder="00.00" [(ngModel)]="textValue" appIsDecimal>
在 ts 文件中声明 textValue 变量。
然后通过以下命令创建指令ng g d IsDecimalDirective
添加该指令声明模块的一部分。

在 IsDecimalDirective 文件中写入以下代码

import { Directive, ElementRef, HostListener, Input, forwardRef, Attribute, AfterContentInit, OnChanges, OnDestroy } from '@angular/core';
import { NG_VALIDATORS, AbstractControl, ValidatorFn, Validator, FormControl, NgModel } from '@angular/forms';

@Directive({
    selector: '[IsDecimal]'
})
export class IsDecimalDirective {

  private regex: RegExp = new RegExp(/^\d*\.?\d{0,2}$/g);
  private specialKeys: Array<string> = ['Backspace', 'Tab', 'End', 'Home', '-', 'ArrowLeft', 'ArrowRight', 'Del', 'Delete'];

  constructor(
    private el: ElementRef
  ) { }

  @HostListener('keydown', ['$event'])
  onKeyDown(event: KeyboardEvent) {

  // Allow Backspace, tab, end, and home keys
  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();
      }
      }
  }

这里是 link StackBits demo

如何在Angular2/4/5中限制2位小数的输入框

How to restrict Input box with 2 decimal places in Angular 2/4/5

typescript

angular2-forms

angular2-directives

angular