web-dev-qa-db-ja.com

入力フィールドを小数点以下2桁に制限-Angular 5

コードは次のとおりです

<input type="number" class="form-control" value="" name="cost_price" #name="ngModel" [(ngModel)]="item.cost_price" placeholder="Cost Price"  />

ユーザーは小数点以下2桁を超えて入力することはできません。

たとえば、ユーザーが21.256を入力する場合。彼は21.25に入ることだけが許可されるべきです

angular 5？

angulartypescriptangular-forms
7
prajeesh

最初に、次のようにTypeScriptの小数点以下2桁を制限するディレクティブを作成します。

import { Directive, ElementRef, HostListener } 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', '-', 'ArrowLeft', 'ArrowRight', 'Del', 'Delete'];
  constructor(private el: ElementRef) {
  }
  @HostListener('keydown', ['$event'])
  onKeyDown(event: KeyboardEvent) {
    console.log(this.el.nativeElement.value);
    // 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();
    }
  }
}

app.module.tsにディレクティブを挿入します。 htmlで次のようにディレクティブを使用します。

<input type="textbox" [(ngModel)]="InputValue" appTwoDigitDecimaNumber>

Angular 4/5/6： 小数点以下2桁の数値制限を検証

これがあなたを助けることを願っています!!!!

29
Sanoj_V

@Sanoj_vとuser3803848のソリューションはうまく機能しますが、IEにはもう1つのバグがあります。ユーザーが数字キーボードからドット記号を使用すると、「10進数」キーイベントが発行され、ディレクティブが正しく機能しません。

これを修正：

    const next: string = [current.slice(0, position), event.key === 'Decimal' ? '.' : event.key, current.slice(position)].join('');

念のため、「。」を追加しましたそして、ユーザー入力をチェックする正規表現への「、」文字。

ディレクティブ全体

@Directive({
  selector: '[appTwoDigitDecimalNumber]',
})
export class TwoDigitDecimaNumberDirective {
  private regex: RegExp = new RegExp(/^\d+[.,]?\d{0,2}$/g);// user can put . or , char.
// input also cannot start from , or .
  private specialKeys: Array<string> = ['Backspace', 'Tab', 'End', 'Home', '-', 'ArrowLeft', 'ArrowRight', 'Del', 'Delete'];

  constructor(private el: ElementRef) {
  }

  @HostListener('keydown', ['$event'])
  onKeyDown(event: KeyboardEvent) {
    if (this.specialKeys.includes(event.key)) {
      return;
    }
    const 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();
    }
  }
}

間違ったデータを入力に貼り付けることはまだ可能です。そのため、おそらく間違ったデータの貼り付けを防ぐために、入力イベントでもう1つの検証が必要になるでしょう。

3
Kamil Naja

@Sanoj_Vによって提供される回答を改善できます。

1）矢印キーを使用して番号を編集することはできません。最後に数字を追加するか、番号を変更する場所をクリックする必要があります。

2）小数点以下2桁を挿入すると、バックスペースのみを使用できるため、最後の小数点を削除するか、他の場所をクリックして数字を削除できますが、何も追加できないため、数字を置き換えて変更することはできません。

それを解決するには、単に置き換えてください：_private specialKeys: Array<string> = ['Backspace', 'Tab', 'End', 'Home', '-'];_

作成者：_private specialKeys: Array<string> = ['Backspace', 'Tab', 'End', 'Home', '-', 'ArrowLeft', 'ArrowRight'];_

次に置き換えます：let next: string = current.concat(event.key);

作成者：const next: string = [current.slice(0, position), event.key, current.slice(position)].join('');

次に、この行をすぐ上に追加します：_const position = this.el.nativeElement.selectionStart;_

@Sanoj_Vがこのディレクティブをくれてありがとう、私は一日中、通貨入力に対処する方法を見つけようとしていました。

3
user3803848

これを実現する最も簡単な方法は、「キープレス」イベントにバインドし、それが有効な入力であるかどうかにかかわらず正規表現で検証することです。

<input type="number" ... placeholder="Cost Price"  (keypress)="validateNumber($event)" />

そして、validateNumberは次のようになります。

validateNumber(e: any) {
    let input = String.fromCharCode(e.charCode);
    const reg = /^\d*(?:[.,]\d{1,2})?$/;

    if (!reg.test(input)) {
      e.preventDefault();
    }
}
1
pau

ng2-currency-mask を使用しています。これは非常に便利です。それはあなたを助けます。

0
ihist

以下のコーディングでは、正規表現を使用せずに、小数点以下2桁の数値フィールド（小数点以下2桁を超えると警告が表示されます）を許可するようにテキストボックスを作成しています。

abc.component.html：

<div >
                                <input class="" type="text" [(ngModel)]="" value="" (keyup)="" [disabled]="" (keypress)="numberOnly($event)">
                                <span class="d-block ml-2">NumericBox(two decimal places)</span>
                            </div>

abc.component.ts：

public dotCount：number = 0;

numberOnly(event): boolean {          
    const charCode = (event.which) ? event.which : event.keyCode;      
    if (charCode == 46) {
        this.dotCount += 1;
        this.checkNumberOnly = (event.target.value);
        var numericCheck = (event.target.value).toString();
        if (numericCheck.includes('.')) {
            this.dotCount += 1;
        }
        if (this.dotCount > 1) {   
            this.dotCount = 0;
            return false;
        }
    }
    if (charCode > 31 && (charCode < 45 || charCode > 57 || charCode==47)) {
        return false;
    }
    this.checkNumberOnly = (event.target.value);
    if (this.checkNumberOnly != null) {
        var numeric = (event.target.value).toString();
        if (numeric.includes('.')) {
            var checkNumeric = numeric.split('.');
            if (checkNumeric.length > 2) {
                return false;
            }
            this.checkString = checkNumeric[1].split('');
            if (this.checkString.length > 1) {
                this.toastrService.warning("Invalid value", "Warning");
                return false;
            }
        }

    }
    this.dotCount = 0;
    this.cdr.detectChanges();
    return true;

}
0
Brijesh Ray

Angular guide のForm Validationもご覧ください。フォームの種類によっては便利な場合があります。

0
Johan Rin