Ограничьте поле ввода двумя десятичными знаками - PullRequest
Новая
       32

Ограничьте поле ввода двумя десятичными знаками

0 голосов
/ 28 марта 2019

Я использую 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();
    }
}

Ответы [ 2 ]

1 голос
/ 28 марта 2019

вы можете создать свою собственную директиву 

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 также

0 голосов
/ 02 апреля 2019

Замените ваш код следующим регулярным выражением 

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

Я надеюсь, что это поможет вам!

...