如何限制用户输入小数点后两位数字 - Angular

Question

我有下面的代码，其中包含输入字段，我使用正则表达式验证该值，使用的正则表达式是 /^\d{1,2}.([0-9]|[0-9][0-9 ]{1})$/

该字段允许用户输入小数点后 2 位以上的数字，并引发验证错误。但我实际需要的是限制用户在小数点后输入 2 位数字后不再输入任何数字。

<mat-form-field appearance="outline" [floatLabel]="'always'">
                <input matInput formControlName="bathsNum" [(ngModel)]="noOfbaths" (blur)="formatBathsNum($event)">
              </mat-form-field>

Answer 1

您可以使用指令的力量来完成此行为，这里我附加了我们在项目中使用的指令。我们已经把它做得相当广泛，以防我们想要超过 2 个小数点的任何地方。

此外，指令的工作原理非常简单：

• 它监听按键事件并检查是否超出小数位以及仅接受输入字段中的数字的限制。
• 此外，它还处理用户将值直接复制到输入框中的情况。由

  onBlur

  事件处理。

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

@Directive({
  selector: '[fixDecimal]'
})
export class FixDecimalDirective implements OnInit {


  @Input('validDecimal') validDecimal?: number = 2;
  @Input('autoFixed') autoFixed?: boolean = true;
  @Input('isAllowNegative') isAllowNegative?: boolean = false;
  @Input() ngModel: any;

  currentElement: ElementRef;
  elementRenderer: Renderer2;

  constructor(private el: ElementRef, private renderer: Renderer2) {
    this.currentElement = el;
    this.elementRenderer = renderer;
  }

  ngOnInit(): void {
    if (!this.ngModel) {
      return;
    }
  }

  @HostListener('blur', ['$event.target.value']) onBlur(value) {
    if(value) {
      if (this.autoFixed) {
        if (value || value == 0) {
          value = parseFloat(value).toFixed(this.validDecimal);
        }
      } else {
        if (value[0] === '.') {
          value = parseFloat(value);
        }
      }
      if (isNaN(value)) {
        value = '0';
      }
      this.currentElement.nativeElement.value = parseFloat(value).toFixed(this.validDecimal);
    }
  }

  @HostListener('keypress', ['$event']) onKeypress(event) {
    const currentDecimalCount = this.countDecimalPlaces(this.currentElement.nativeElement.value);
    if (event.keyCode === 32 || (event.keyCode === 45 && !this.isAllowNegative) || currentDecimalCount >= this.validDecimal) {
      event.preventDefault();
    }
  }

  countDecimalPlaces(number) {
    if (isNaN(number) || Number.isInteger(number)) {
      return 0;
    } else {
      const decimalPart = String(number).split('.')[1];
      return decimalPart ? decimalPart.length : 0;
    }
  }

}