Angular2-数値のみを受け入れる入力フィールド

87

Angular 2で、入力フィールド（テキストボックス）をマスクして、アルファベット文字ではなく数字のみを受け入れるようにするにはどうすればよいですか？

次のHTML入力があります。

<input 
  type="text" 
  *ngSwitchDefault 
  class="form-control" 
  (change)="onInputChange()" 
  [(ngModel)]="config.Value" 
  (focus)="handleFocus($event)" 
  (blur)="handleBlur($event)"
/>

上記の入力は一般的なテキスト入力であり、単純なテキストフィールドとして、またはたとえば年を示すための数値フィールドとして使用できます。

Angular 2を使用して、同じ入力コントロールを使用し、このフィールドにある種のフィルター/マスクを適用して、数値のみを受け入れるようにするにはどうすればよいですか？

これを達成するためのさまざまな方法は何ですか？

注：入力番号タイプを使用せずに、テキストボックスのみを使用してこれを実現する必要があります。

html  angular  input  angularjs-directive 
— アニルッダポンドヘ
ソース
1
html属性だけを使用できますか？type = number
— inoabrian 2017年
@inoabrian数値タイプを使用せずにこれを実現したいと思います。
— Aniruddha Pondhe 2017年
これはあなたを助けることがあります。stackoverflow.com/questions/39799436/...
— chandan7

回答:

112

angle2ディレクティブを使用できます。プランカー 

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

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

  constructor(private el: ElementRef) { }

  @Input() OnlyNumber: boolean;

  @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 || e.metaKey)) ||
        // Allow: Ctrl+C
        (e.keyCode === 67 && (e.ctrlKey || e.metaKey)) ||
        // Allow: Ctrl+V
        (e.keyCode === 86 && (e.ctrlKey || e.metaKey)) ||
        // Allow: Ctrl+X
        (e.keyCode === 88 && (e.ctrlKey || e.metaKey)) ||
        // 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();
        }
      }
  }
}

入力に属性としてディレクティブ名を書き込む必要があります

<input OnlyNumber="true" />

モジュールの宣言配列にディレクティブを記述することを忘れないでください。

正規表現を使用する場合でも、ファンクションキーが必要です

export class OnlyNumber {

  regexStr = '^[0-9]*$';
  constructor(private el: ElementRef) { }

  @Input() OnlyNumber: boolean;

  @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+V
        (e.keyCode == 86 && 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;
        }
      let ch = String.fromCharCode(e.keyCode);
      let regEx =  new RegExp(this.regexStr);    
      if(regEx.test(ch))
        return;
      else
         e.preventDefault();
      }
  }
}
— omeralper
ソース
1
それは素晴らしいことです。RegExパターンを使用して同じことを達成できる方法はありますか？
— Aniruddha Pondhe 2017年
3
コピー＆ペーストはできません。
— Shardul 2017
@Shardul(e.keyCode == 86 && e.ctrlKey === true)は条件を追加するだけで、コピーは機能していますが、貼り付けは機能していません
— Al-Mothafar 2017
1
プラスとマイナスのスペースを追加するにはどうすればよいですか？
— Zahidul Islam Ruhel 2018年
1
— ラジャ・ラマモハンThavalam
65

ディレクティブが必要ない場合

https://stackblitz.com/edit/numeric-only

component.htmlで

<input (keypress)="numberOnly($event)" type="text">

component.tsで

export class AppComponent {

  numberOnly(event): boolean {
    const charCode = (event.which) ? event.which : event.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
      return false;
    }
    return true;

  }
}
— rashidnk
ソース
34
このアプローチの問題は、主要なイベントがユーザーの貼り付けやブラウザーの入力フィールドへの自動入力をキャプチャしないことです。したがって、これは不十分な解決策です。
— Darryn Hosking 2018
30

これは古い質問ですが、これは一般的な機能であるため、私が行った変更を共有したいと思います。

  • カスタム小数点区切り文字（ポイントまたはコンマ）
  • 整数のみ、または整数と小数のサポート
  • 正の数のみ、または正と負のサポート
  • マイナス記号（-）が最初にあることを検証します
  • マウスの貼り付けのサポート（https://caniuse.com/#feat=clipboardによる制限付き）
  • Macコマンドキーのサポート

  • 「.33」や「33」などの文字列を置き換えます。正しいバージョンの場合：0.33および33.0

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

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

    @Input() allowDecimals: boolean = true;
    @Input() allowSign: boolean = false;
    @Input() decimalSeparator: string = '.';

    previousValue: string = '';

    // --------------------------------------
    //  Regular expressions
    integerUnsigned: string = '^[0-9]*$';
    integerSigned: string = '^-?[0-9]+$';
    decimalUnsigned: string = '^[0-9]+(.[0-9]+)?$';
    decimalSigned: string = '^-?[0-9]+(.[0-9]+)?$';

    /**
     * Class constructor
     * @param hostElement
     */
    constructor(private hostElement: ElementRef) { }

    /**
     * Event handler for host's change event
     * @param e
     */
    @HostListener('change', ['$event']) onChange(e) {

            this.validateValue(this.hostElement.nativeElement.value);
}

/**
 * Event handler for host's paste event
 * @param e
 */
@HostListener('paste', ['$event']) onPaste(e) {

    // get and validate data from clipboard
    let value = e.clipboardData.getData('text/plain');
    this.validateValue(value);
    e.preventDefault();
}

/**
 * Event handler for host's keydown event
 * @param event
 */
@HostListener('keydown', ['$event']) onKeyDown(e: KeyboardEvent) {

    let cursorPosition: number = e.target['selectionStart'];
    let originalValue: string = e.target['value'];
    let key: string = this.getName(e);
    let controlOrCommand = (e.ctrlKey === true || e.metaKey === true);
    let signExists = originalValue.includes('-');
    let separatorExists = originalValue.includes(this.decimalSeparator);

    // allowed keys apart from numeric characters
    let allowedKeys = [
        'Backspace', 'ArrowLeft', 'ArrowRight', 'Escape', 'Tab'
    ];

    // when decimals are allowed, add
    // decimal separator to allowed codes when
    // its position is not close to the the sign (-. and .-)
    let separatorIsCloseToSign = (signExists && cursorPosition <= 1);
    if (this.allowDecimals && !separatorIsCloseToSign && !separatorExists) {

        if (this.decimalSeparator == '.')
            allowedKeys.push('.');
        else
            allowedKeys.push(',');
    }

    // when minus sign is allowed, add its
    // key to allowed key only when the
    // cursor is in the first position, and
    // first character is different from
    // decimal separator
    let firstCharacterIsSeparator = (originalValue.charAt(0) != this.decimalSeparator);
    if (this.allowSign && !signExists &&
        firstCharacterIsSeparator && cursorPosition == 0) {

        allowedKeys.push('-');
    }

    // allow some non-numeric characters
    if (allowedKeys.indexOf(key) != -1 ||
        // Allow: Ctrl+A and Command+A
        (key == 'a' && controlOrCommand) ||
        // Allow: Ctrl+C and Command+C
        (key == 'c' && controlOrCommand) ||
        // Allow: Ctrl+V and Command+V
        (key == 'v' && controlOrCommand) ||
        // Allow: Ctrl+X and Command+X
        (key == 'x' && controlOrCommand)) {
        // let it happen, don't do anything
        return;
    }

    // save value before keydown event
    this.previousValue = originalValue;

    // allow number characters only
    let isNumber = (new RegExp(this.integerUnsigned)).test(key);
    if (isNumber) return; else e.preventDefault();
}

/**
 * Test whether value is a valid number or not
 * @param value
 */
validateValue(value: string): void {

    // choose the appropiate regular expression
    let regex: string;
    if (!this.allowDecimals && !this.allowSign) regex = this.integerUnsigned;
    if (!this.allowDecimals && this.allowSign) regex = this.integerSigned;
    if (this.allowDecimals && !this.allowSign) regex = this.decimalUnsigned;
    if (this.allowDecimals &&  this.allowSign) regex = this.decimalSigned;

    // when a numbers begins with a decimal separator,
    // fix it adding a zero in the beginning
    let firstCharacter = value.charAt(0);
    if (firstCharacter == this.decimalSeparator)
        value = 0 + value;

    // when a numbers ends with a decimal separator,
    // fix it adding a zero in the end
    let lastCharacter = value.charAt(value.length-1);
    if (lastCharacter == this.decimalSeparator)
        value = value + 0;

    // test number with regular expression, when
    // number is invalid, replace it with a zero
    let valid: boolean = (new RegExp(regex)).test(value);
    this.hostElement.nativeElement['value'] = valid ? value : 0;
}

/**
 * Get key's name
 * @param e
 */
getName(e): string {

    if (e.key) {

        return e.key;

    } else {

        // for old browsers
        if (e.keyCode && String.fromCharCode) {

            switch (e.keyCode) {
                case   8: return 'Backspace';
                case   9: return 'Tab';
                case  27: return 'Escape';
                case  37: return 'ArrowLeft';
                case  39: return 'ArrowRight';
                case 188: return ',';
                case 190: return '.';
                case 109: return '-'; // minus in numbpad
                case 173: return '-'; // minus in alphabet keyboard in firefox
                case 189: return '-'; // minus in alphabet keyboard in chrome
                default: return String.fromCharCode(e.keyCode);
            }
        }
    }
}

使用法：

 <input NumbersOnly
        [allowDecimals]="true"
        [allowSign]="true"
        type="text">
— エルビスフェルナンデス
ソース
無効な貼り付けにゼロが追加されないように、validatevalueメソッドの最後の行を変更しました。IF（有効）{this.hostElement.nativeElement [ '値'] =値;}
— アブドゥルレーマンサイード
ドラッグアンドドロップ検証も追加していただけますか？また、入力フィールドの値は、先頭と末尾の小数点記号の0が埋め込まれた値に変更されますが、値は双方向バインディング変数で更新されないことに気付きました。例：[（NgModel）] = "myVariable"、ここで、入力フィールドに.3と入力すると、テキスト入力の値はぼかし時に0.3に変更されますが、myVariableの値は「.3」のままです。
— SushmitSagar19年
削除と入力の入力がありませんが、とにかく解決策は非常に優れています
— OlegBondarenko20年
29

@omeralperからの回答に基づいて構築したいと思います。これは、私の意見では、固溶体の優れた基盤を提供しました。

私が提案しているのは、最新のWeb標準を備えた単純化された最新バージョンです。event.keycodeはWeb標準から削除されており、将来のブラウザーの更新ではサポートされなくなる可能性があることに注意することが重要です。https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCodeを参照してください

さらに、方法 

String.fromCharCode(e.keyCode);

キーボード構成が異なると特定のキーコードが異なる文字になるため、ユーザーが押しているキーに関連するkeyCodeがユーザーのキーボードで識別される予想される文字にマップされることを保証するものではありません。これを使用すると、特定が困難なバグが発生し、特定のユーザーの機能が簡単に損なわれる可能性があります。むしろ、event.keyの使用を提案しています。こちらのドキュメントを参照してくださいhttps://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

さらに、結果の出力が有効な小数であることだけが必要です。これは、数値1、11.2、5000.2341234は受け​​入れられるべきですが、値1.1.2は受け入れられないことを意味します。

私のソリューションでは、特にユーザーが関連フィールドに不要なテキストを貼り付けるときにバグのウィンドウが開くため、切り取り、コピー、貼り付けの機能を除外していることに注意してください。それには、キーアップハンドラーでのクリーンアッププロセスが必要になります。これはこのスレッドの範囲ではありません。

これが私が提案している解決策です。

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

@Directive({
    selector: '[myNumberOnly]'
})
export class NumberOnlyDirective {
    // Allow decimal numbers. The \. is only allowed once to occur
    private regex: RegExp = new RegExp(/^[0-9]+(\.[0-9]*){0,1}$/g);

    // Allow key codes for special events. Reflect :
    // Backspace, tab, end, home
    private specialKeys: Array<string> = [ 'Backspace', 'Tab', 'End', 'Home' ];

    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;
        }

        // Do not use event.keycode this is deprecated.
        // See: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode
        let current: string = this.el.nativeElement.value;
        // We need this because the current value on the DOM element
        // is not yet updated with the value from this event
        let next: string = current.concat(event.key);
        if (next && !String(next).match(this.regex)) {
            event.preventDefault();
        }
    }
}
— ジャンポールA。
ソース
これは本当に興味深いアプローチです。（e.keyCode == 67 && e.ctrlKey === true）などの古いメソッドに頼らずにコピー/貼り付け機能を実装する方法について何か提案はありますか？
— ender2050 2017
1
私は個人的にこれを試していませんが、トリガーされるコピー/貼り付けイベントを同様に聞くことができます。それらは、コピー/貼り付けされているデータを含むClipboardEvent（developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent）を生成します。唯一の欠点は、これがまだ実験的であり、最新のブラウザでのみサポートされていることです-caniuse.com/#search=paste
— JeanPaul A.
同様のアプローチを試しましたが、残念ながらこれがすべての場合に機能するとは限りません。「次の」変数は、押された文字が現在入力されている値の最後にあることを前提としています。これは常に当てはまるとは限りません。たとえば、誰かが100と入力した後、先頭に1を追加して1100にすることにした場合です。「次の」変数は正しくありません（1001）。
— カルロスロドリゲス
'next'値は、入力量が有効な小数であるかどうかを確認するためにのみ使用されるため（値を設定するためではなく）、末尾に追加しても正規表現の検証は変更されません。
— JeanPaul A. 2017
この行を追加して入力制御に適用したいのは私だけです。<input myNumberOnly type = "text" id = "yourId">
— Lrodriguez84 2018
17

より簡潔なソリューション。このディレクティブを試してください。

ReactiveFormsを使用している場合にも使用できます。

export class NumberOnlyDirective {
  private el: NgControl;

  constructor(private ngControl: NgControl) {
    this.el = ngControl;
  }

  // Listen for the input event to also handle copy and paste.
  @HostListener('input', ['$event.target.value'])
  onInput(value: string) {
    // Use NgControl patchValue to prevent the issue on validation
    this.el.control.patchValue(value.replace(/[^0-9]/g, ''));
  }
}

次のように入力で使用します。

<input matInput formControlName="aNumberField" numberOnly>
— ベングラパ
ソース
1
このソリューションは機能しますが、モデル変更イベントを2回トリガーしますが、正規表現を使用するアプローチが正しいと述べています。モデル変更イベントを2回発生させないバージョンは次のとおり
— …–ntziolis19年
ntziolisのコメントへ：これまでのところ、BenGulapaのソリューションは私のために働いています。しかし、ntziolisが参照するソリューションはそうではありません。私が間違っている場合は許してください、しかし少なくとも私にとっては、stackblitzへの上記のリンクのコードの問題は、最後に入力した不要な文字がユーザーインターフェイスに表示されなかったにもかかわらず、どういうわけかコンポーネントのバインドされた変数に入れます。最後の不要な文字。
— user23674 1820
コメントを続けるには：Angular7とHMTL入力テキストを2文字に制限して使用します。
— user23674 1820
15 
<input type="text" (keypress)="keyPress($event)">


  keyPress(event: any) {
    const pattern = /[0-9\+\-\ ]/;

    let inputChar = String.fromCharCode(event.charCode);
    if (event.keyCode != 8 && !pattern.test(inputChar)) {
      event.preventDefault();
    }
  }
— ケタンプラダン
ソース
14

テキストの代わりにtype = "number"を使用する必要があります。最大数と最小数を指定することもできます

<input type="number" name="quantity" min="1" max="5">
— ジア・カーン
ソース
2
数値タイプを使わずにこれを実現したい。
— Aniruddha Pondhe 2017年
3
この回答で説明されているように、番号タイプのサポートはまだかなりバグがあります：stackoverflow.com/a/14995890/1156185
— Nicolas Forney
9
欠点は、科学的記数法の一部としてtype="number"文字eを受け入れることです
— user776686 2017年
12

あなたはこのようにそれを達成することができます

<input type="text" pInputText (keypress)="onlyNumberKey($event)" maxlength="3"> 

onlyNumberKey(event) {
    return (event.charCode == 8 || event.charCode == 0) ? null : event.charCode >= 48 && event.charCode <= 57;
}

//for Decimal you can use this as

onlyDecimalNumberKey(event) {
    let charCode = (event.which) ? event.which : event.keyCode;
    if (charCode != 46 && charCode > 31
        && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

これがお役に立てば幸いです。

— Pardeep Jain
ソース
これについて詳しく教えていただけますか？event.charCode == 8は何をしていますか？
— bosari 2017
10

正規表現を使用できます：

<input type="text" (keypress)="numericOnly($event)">

numericOnly(event): boolean {    
    let patt = /^([0-9])$/;
    let result = patt.test(event.key);
    return result;
}
— Aathreya
ソース
1
はい、役に立ちますが、入力フィールドにも（。）decimalが必要です
— rinkuChoudhary19年
6

私はこれがたくさんの答えを持っていることを知っています、しかし私は以下を処理する必要がありました（答えのどれも完全にサポートしていないようでした）：

  • 複数行のオプションを使用したtextareaのサポート
  • 小数または負の数
  • 1行あたりの最大長
  • クロスブラウザのサポート（Chrome、Edge、IE 11）
  • カット/ペースト操作とイベントの処理

このソリューションでは、次のようなテキスト領域を定義できます。

<textarea class="form-control" [(ngModel)]="this.myModelVariable"
    appOnlyNumbers [allowNegative]="true" [allowMultiLine]="true" 
    [allowDecimal]="true" [maxLength]="10"
    placeholder="Enter values (one per line)"></textarea>

または、正の整数が必要な場合

<textarea class="form-control" [(ngModel)]="this.myModelVariable"
    appOnlyNumbers [allowMultiLine]="true" [maxLength]="9"
    placeholder="Enter values (one per line)"></textarea>

これが私の指示です：

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

@Directive({
  selector: '[appOnlyNumbers]'
})
export class OnlyNumbersDirective {
  constructor(private el: ElementRef) { }

  @Input() allowMultiLine: boolean = false;
  @Input() allowNegative: boolean = false;
  @Input() allowDecimal: boolean = false;
  @Input() maxLength: number = 0;
  regex: RegExp;

  @HostListener('keypress', ['$event'])
  onKeyPress(event: KeyboardEvent) {
    this.validate(event, event.key === 'Enter' ? '\n' : event.key);
  }

  @HostListener('paste', ['$event'])
  onPaste(event: Event) {
    const pastedText = (<any>window).clipboardData && (<any>window).clipboardData.getData('Text') // If IE, use window
      || <ClipboardEvent>event && (<ClipboardEvent>event).clipboardData.getData('text/plain'); // Non-IE browsers
    this.validate(event, pastedText);
  }

  @HostListener('cut', ['$event'])
  onCut(event: Event) {
    this.validate(event, '');
  }

  validate(event: Event, text: string) {
    const txtInput = this.el.nativeElement;
    const newValue = (txtInput.value.substring(0, txtInput.selectionStart)
      + text + txtInput.value.substring(txtInput.selectionEnd));
    if (!this.regex) {
      this.regex = <RegExp>eval('/^'
        + (this.allowNegative ? '-?' : '')
        + (this.allowDecimal ? '((\\d+\\.?)|(\\.?))\\d*' : '\\d*')
        + '$/g');
    }
    var lines = this.allowMultiLine ? newValue.split('\n') : [newValue];
    for (let line of lines) {
      let lineText = line.replace('\r', '');
      if (this.maxLength && lineText.length > this.maxLength || !lineText.match(this.regex)) {
        event.preventDefault();
        return;
      }
    }
  }

}
— ジェイソンW
ソース
4

これを実現するために、次のように関数をonInputメソッドにバインドしました。

(input)="stripText(infoForm.get('uin'))

これが私のフォーム内の例です：

<form [formGroup]="infoForm" (submit)="next()" class="ui form">
    <input type="text" formControlName="uin" name="uin" id="uin" (input)="stripText(infoForm.get('uin'))" required/>
</form>

次に、コンポーネントに次の関数を追加しました。

  stripText(control: FormControl) {
   control.setValue(control.value.replace(/[^0-9]/g, ''));
  }

この正規表現/[^0-9]/gは数字ではないものを検索し、.replace私を使用してそれを何にも置き換えないように設定しました。したがって、ユーザーが数字以外の文字（この場合は0から9までの文字）を入力しようとすると、テキストボックスに何も表示されないように見えます。

— クリストファー
ソース
4

JeanPaulA。とrdanielmurphyに感謝します。入力フィールドを数値のみに制限するための独自のカスタムディレクティブを作成しました。また、最大および最小入力属性を追加しました。角度7でも動作します。

Angular

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

@Directive({
  selector: '[appNumberOnly]'
})
export class NumberOnlyDirective {
  // Allow decimal numbers. The \. is only allowed once to occur
  private regex: RegExp = new RegExp(/^[0-9]+(\.[0-9]*){0,1}$/g);

  // Allow key codes for special events. Reflect :
  // Backspace, tab, end, home
  private specialKeys: Array<string> = ['Backspace', 'Tab', 'End', 'Home'];
  constructor(private el: ElementRef) { }

  @Input() maxlength: number;
  @Input() min: number;
  @Input() max: number;

  @HostListener('keydown', ['$event'])
  onKeyDown(event: KeyboardEvent) {
    // Allow Backspace, tab, end, and home keys
    if (this.specialKeys.indexOf(event.key) !== -1) {
      return;
    }

    // Do not use event.keycode this is deprecated.
    // See: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode
    const current: string = this.el.nativeElement.value;

    // We need this because the current value on the DOM element
    // is not yet updated with the value from this event
    const next: string = current.concat(event.key);
    if (next && !String(next).match(this.regex) || (this.maxlength && next.length > this.maxlength) ||
      (this.min && +next < this.min) ||
      (this.max && +next >= this.max)) {
      event.preventDefault();
    }
  }

  @HostListener('paste', ['$event']) onPaste(event) {
    // Don't allow pasted text that contains non-numerics
    const pastedText = (event.originalEvent || event).clipboardData.getData('text/plain');

    if (pastedText) {
      const regEx = new RegExp('^[0-9]*$');
      if (!regEx.test(pastedText) || (this.maxlength && pastedText.length > this.maxlength) ||
        (this.min && +pastedText < this.min) ||
        (this.max && +pastedText >= this.max)) {
        event.preventDefault();
      }
    }
  }

}

HTML

<input type="text" class="text-area" [(ngModel)]="itemName" maxlength="3" appNumberOnly />
— レオックス
ソース
4

最良の答えを得るための最新のアプローチ（非推奨のe.keyCodeなし）：

@HostListener('keydown', ['$event']) onKeyDown(event) {
    let e = <KeyboardEvent> event;
    if (['Delete', 'Backspace', 'Tab', 'Escape', 'Enter', 'NumLock', 'ArrowLeft', 'ArrowRight', 'End', 'Home', '.'].indexOf(e.key) !== -1 ||
      // Allow: Ctrl+A
      (e.key === 'a' && (e.ctrlKey || e.metaKey)) ||
      // Allow: Ctrl+C
      (e.key === 'c' && (e.ctrlKey || e.metaKey)) ||
      // Allow: Ctrl+V
      (e.key === 'v' && (e.ctrlKey || e.metaKey)) ||
      // Allow: Ctrl+X
      (e.key === 'x' && (e.ctrlKey || e.metaKey))) {
      // let it happen, don't do anything
      return;
    }
    // Ensure that it is a number and stop the keypress
    if ((e.shiftKey || ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'].indexOf(e.key) === -1)) {
      e.preventDefault();
    }
}
— アゴレカ
ソース
1
これはすごい！@Directive（{selector： "[inputNumericInput]"}）export class NumericInputDirective {@HostListener（）}
— Nate
2
うまく機能します。コピーペーストで観察された副作用のみ。これにより、外部の非数値文字列をコピーして貼り付けることができます。Googleで検索し、よりよい解決策を見つけたアドレスこの@のstackblitz.com/edit/...
— vinsinraw
4

任意の正規表現ディレクティブ

これは、任意の正規表現を使用してユーザーをブロックし、無効な値を入力する小さなディレクティブです。

コードスニペットを表示

数字のみをマスクするには、

<input [allowedRegExp]="'^[0-9]*$'" type="text" ... >
— KamilKiełczewski
ソース
残念ながら、サーカムフレックス+書きたいものをスパムすることで、このソリューションをだますことができます。
— ProgFroz
3

ディレクティブを作成し、以下のhostlistenerを追加するだけです。

@HostListener('input', ['$event'])
    onInput(event: Event) {
        this.elementRef.nativeElement.value = (<HTMLInputElement>event.currentTarget).value.replace(/[^0-9]/g, '');
    }

無効なテキストを空に置き換えます。すべてのキーとキーの組み合わせは、IE9まですべてのブラウザーで機能するようになりました。

— Gaurav Joshi
ソース
タイプをcharで開始する場合、charは追加されませんが、モデルの長さのカウントには1がかかります。これを解決するにはどうすればよいですか。また、要素の長さが最大の場合、混合コンテンツをコピーして貼り付けると、モデル数は最大長になります。たとえば、最大長が10の場合、1238261jhgjh12987をコピーして入力に貼り付けると123816のみが追加されますが、モデルの長さは10になります。解決策はありますか？
— Satheesh Natarajan 2018
3

有効な携帯電話番号パターンのパターン（ '^（（\ + 91-？）| 0）？[0-9] {10} $'）

テキストボックスから数字のみを受け入れるパターンpattern（ '[0-9] *'）

特定の番号を持つ番号のみを受け入れるためのパターン例：PINコード。pattern（ '^ [0-9] {5} $'）

— Satish Deokar
ソース
3
  1. <input oninput="this.value=this.value.replace(/[^0-9]/g,'')"

または：2。HTMLファイル内：

 <input [(ngModel)]="data" (keypress)="stripText($event)"
     class="form-control">

tsファイル内：

stripText(event) {
const seperator  = '^([0-9])';
const maskSeperator =  new RegExp(seperator , 'g');  
let result =maskSeperator.test(event.key);   return result;   }

この2つのソリューションは機能します

— abolfazl_mehdi
ソース
コードブロックを使用して、コードスニペットをフォーマットしてください。
— YUS
2

上記のディレクティブにいくつかの変更を加え、min、max、maxlengthを実装しました。

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

@Directive({
  selector: '[numberOnly]'
})
export class NumbersOnlyDirective {

  private regex: RegExp = new RegExp(/[0-9]/g);
  // Allow key codes for special events. Reflect :
  private specialKeys: Array<number> = [46, 8, 9, 27, 13, 110, 190, 35, 36, 37, 39];
  // Backspace, tab, end, home

  @Input() maxlength: number;
  @Input() min: number;
  @Input() max: number;

  constructor(private el: ElementRef) {
  }
    @HostListener('keydown', ['$event'])
    onKeyDown(event: KeyboardEvent) {
    e = <KeyboardEvent>event;

if ((
  (this.specialKeys.indexOf(event.which) > -1) ||
  // to allow backspace, enter, escape, arrows  
  (e.which == 65 && e.ctrlKey == true) ||
  // Allow: Ctrl+C        
  (e.which == 67 && e.ctrlKey == true) ||
  // Allow: Ctrl+X
  (e.which == 88 && e.ctrlKey == true))) {
  return;
} else if (// to allow numbers  
  (e.which >= 48 && e.which <= 57) ||
  // to allow numpad number  
  (event.which >= 96 && event.which <= 105)) { }
else {
      event.preventDefault();
    }
    let current: string = this.el.nativeElement.value;

    let next: string = current.concat(event.key);
    if ((next && !String(next).match(this.regex)) ||
      (this.maxlength && next.length > this.maxlength) ||
      (this.min && +next < this.min) ||
      (this.max && +next >= this.max)) {
      event.preventDefault();
    }

  }
}
— カランミストリー
ソース
入力フィールドから最大長の値を指定する方法
— Jason Brody
<input id = "COMN" class = "wb-e-inp-1__input" type = "text" appNumberOnly maxlength = "10" />動作中
— Jason Brody
2

00345のような先頭の0でも機能するためキャスト

@Directive({
  selector: '[appOnlyDigits]'
})
export class AppOnlyDigitsDirective {
  @HostListener('input', ['$event'])
  onKeyDown(ev: KeyboardEvent) {
    const input = ev.target as HTMLInputElement;
    input.value = String(input.value.replace(/\D+/g, ''));
  }
}
— ウィッシャー
ソース
1

@omeralperの答えから。ピリオドアスキー（キーコード110,190）を受け入れないように少し変更します。そして、let ch =（e.key）;を使用します。言語（タイ語や日本語など）を変更するときに正規表現と比較すると、それらの言語の文字は受け入れられません

export class OnlyNumber {

  regexStr = '^[0-9]*$';
  constructor(private el: ElementRef) { }

  @Input() OnlyNumber: boolean;

  @HostListener('keydown', ['$event']) onKeyDown(event) {
    let e = <KeyboardEvent> event;
    if (this.OnlyNumber) {
      // console.log(event, this.OnlyNumber);
        if ([46, 8, 9, 27, 13].indexOf(e.keyCode) !== -1) {
          return;
        }
      let ch = (e.key);
      let regEx =  new RegExp(this.regexStr);   
      if(regEx.test(ch))
        return;
      else
         e.preventDefault();
    }
  }
}

この助けを願っています:)

— スパコーントントラ
ソース
1

このバリデーターを作成して、コンポーネントにインポートできます。
基本的に、フォームの入力文字列を検証します。

  • ドットがないことを確認してください
  • 文字列を数値に変換します
  • チェックは整数です
  • チェックがゼロより大きい

プロジェクトに実装するには：

  1. アプリフォルダー内の推奨パス：src / app / validators / number.validator.ts

  2. コンポーネントにインポートする

    import { NumberValidator } from '../../validators/number.validator';

  3. フォームコントロールに追加します
    inputNumber: ['', [NumberValidator.isInteger]],
  4. 無効な文字を表示したく(change)="deleteCharIfInvalid()"ない場合form.get('inputNumber').hasError('isInteger')はtrue、を入力にバインドします。表示されている場合は 、最後に挿入された文字を削除します。
// FILE: src/app/validators/number.validator.ts

import { FormControl } from '@angular/forms';

export interface ValidationResult {
    [key: string]: boolean;
}

export class NumberValidator {

    public static isInteger(control: FormControl): ValidationResult {
        // check if string has a dot
        let hasDot:boolean = control.value.indexOf('.') >= 0 ? true : false;
        // convert string to number
        let number:number = Math.floor(control.value);
        // get result of isInteger()
        let integer:boolean = Number.isInteger(number);
        // validate conditions 
        let valid:boolean = !hasDot && integer && number>0;
        console.log('isInteger > valid', hasDot, number, valid);
        if (!valid) {
            return { isInteger: true };
        }
        return null;
    }        
}
— ギレフド
ソース
Number.isInteger(Math.floor(control.value))常に真実ではないでしょうか？parseFloat代わりにすべきだと思います。
— AndyTheEntity 2018年
1

貼り付けたコンテンツのサニタイズをサポート：

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

@Directive({
  selector: '[NumbersOnly]'
})
export class NumbersOnlyDirective {

    DIGITS_REGEXP =  new RegExp(/\D/g);
    constructor(private el: ElementRef) { 

        // Sanatize clipboard by removing any non-numeric input after pasting
        this.el.nativeElement.onpaste = (e:any) => {
            e.preventDefault();
            let text;
            let clp = (e.originalEvent || e).clipboardData;
            if (clp === undefined || clp === null) {
                text = (<any>window).clipboardData.getData('text') || '';
                if (text !== '') {
                    text = text.replace(this.DIGITS_REGEXP, '');
                    if (window.getSelection) {
                        let newNode = document.createElement('span');
                        newNode.innerHTML = text;
                        window.getSelection().getRangeAt(0).insertNode(newNode);
                    } else {
                        (<any>window).selection.createRange().pasteHTML(text);
                    }
                }
            } else {
                text = clp.getData('text/plain') || '';
                if (text !== '') {
                    text = text.replace(this.DIGITS_REGEXP, '');
                    document.execCommand('insertText', false, text);
                }
            }
        };
    }

  @HostListener('keydown', ['$event']) onKeyDown(event) {
    let e = <KeyboardEvent> event;
    if ([46, 8, 9, 27, 13, 110, 190].indexOf(e.keyCode) !== -1 ||
      // Allow: Ctrl+A
      (e.keyCode === 65 && (e.ctrlKey || e.metaKey)) ||
      // Allow: Ctrl+C
      (e.keyCode === 67 && (e.ctrlKey || e.metaKey)) ||
      // Allow: Ctrl+V
      (e.keyCode === 86 && (e.ctrlKey || e.metaKey)) ||
      // Allow: Ctrl+X
      (e.keyCode === 88 && (e.ctrlKey || e.metaKey)) ||
      // 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();
      }
    }

}
— mad_fox
ソース
1

簡単なものは次のとおりです。単純なディレクティブkeydownイベントで、キーの長さが1であり、キーが数値ではないことを確認し、preventDefault()その文字をレンダリングしません。

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

@Directive({
    selector: '[numbersOnly]'
})
export class NumbersOnlyDirective {
    @HostListener('keydown', ['$event'])
    keyDownEvent(event: KeyboardEvent) {
        if (event.key.length === 1 && (event.which < 48 || event.which > 57)) {
            event.preventDefault();
        }
    }

}

HTML： 

<input type="text" [(ngModel)]="numModel" numbersOnly />

制限事項：マウスを使用して貼り付けると、他の文字を受け入れることができます。これを回避するには、モデルをディレクティブへの入力として渡し、ngOnChageそのモデルに値を数値のみに変更します。

以下のように：

編集：モデルの変更を検出し、入力の値を更新するためのコードを追加しました

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

@Directive({
    selector: '[numbersOnly]'
})
export class NumbersOnlyDirective implements OnChanges {

    @Input() numbersOnly: any;

    constructor(private el: ElementRef) {}

    @HostListener('keydown', ['$event'])
    keyDownEvent(event: KeyboardEvent) {
        // Add other conditions if need to allow ctr+c || ctr+v
        if (event.key.length === 1 && (event.which < 48 || event.which > 57)) {
            event.preventDefault();
        }
    }

    ngOnChanges(changes) {
        if (changes.numbersOnly) {
            this.el.nativeElement.value = this.el.nativeElement.value.replace(/[^0-9]/g, '');
        }
    }

}

HTML： 

<input type="text" [(ngModel)]="numModel" [numbersOnly]="numModel" />
— ラハールシャー
ソース
タイプをcharで開始する場合、charは追加されませんが、モデルの長さのカウントには1がかかります。これを解決するにはどうすればよいですか。
— Satheesh Natarajan 2018
長さを確認するとき、変更を加える前後のディレクティブでは0のままです。ある時点でそれが1の場合、すぐに0に戻るはずです。
— ラハールシャー
いいえ、ちがいます。テンプレートにnumModel.lengthをバインドして、長さのカウントを確認してください
— Satheesh Natarajan 2018
1 
 import {Directive, ElementRef, HostListener, Output, EventEmitter} from '@angular/core';


    //only-digits
    @Directive({
      selector: '[only-digits]'
    })
    export class OnlyDigits {

      constructor(public el: ElementRef) {

        this.el.nativeElement.onkeypress = (evt) => {
          if (evt.which < 48 || evt.which > 57) {
            evt.preventDefault();
          }
        };

      }
    }

ディレクティブもそれを行うための最良の方法です

— プラモド・パティル
ソース
0

fromCharCodeは、テンキー「1」を押すと「a」を返すため、このメトイドは避ける必要があります

（管理者：いつものようにコメントできませんでした）

— fdsfdsfdsfds
ソース
0

コピー/貼り付けの処理について多くのコメントを見ました。

@omeralperの回答に便乗するには、貼り付けイベントハンドラーをonlyNumberディレクティブに追加して、コピー/貼り付けを処理します。 

 @HostListener('paste', ['$event']) onPaste(event) {
  // Don't allow pasted text that contains non-numerics
  var pastedText = (event.originalEvent || event).clipboardData.getData('text/plain');

  if (pastedText) {
    var regEx = new RegExp('^[0-9]*$');
    if (!regEx.test(pastedText)) {
      event.preventDefault();
    }
}

これにより、コンテンツが数字の場合にのみ、コンテンツをコピーしてテキストボックスに貼り付けることができます。これが最も簡単な解決策です。クリップボードの内容を変更して非数値を削除することは、はるかに複雑であり、価値がない可能性があります。

IEから貼り付けたテキストを取得するには、次を使用できます。

window.clipboardData.getData('Text');
— rdanielmurphy
ソース
0

書くだけでは簡単ではないでしょう

onlyNumbers(event) {
if(isNaN(event.target.value * 1)) {
 console.log("Not a number")
} else {
  console.log("Number")
}

}

— Prajwal Ravishankar
ソース
0

ControlValueAccessorインターフェイス（https://angular.io/api/forms/ControlValueAccessor）を実装するディレクティブを作成することもできます。

こちらの作業例をご覧ください：https：//stackblitz.com/edit/angular-input-field-to-accept-only-numbers

'input'イベントをリッスンでき、キーコードをチェックする必要はありません。コピー＆ペーストをサポートし、ControlValueAccessorインターフェイスによりAngular FormsAPIとうまく統合されます。

指令：

@Directive({
    ...
    selector: '[onlyNumber]'
})
export class OnlyNumberDirective implements ControlValueAccessor {
private onChange: (val: string) => void;
...
private value: string;

constructor(
    private elementRef: ElementRef,
    private renderer: Renderer2
) {
}

...

@HostListener('input', ['$event.target.value'])
onInputChange(value: string) {
    const filteredValue: string = filterValue(value);
    this.updateTextInput(filteredValue, this.value !== filteredValue);
}

private updateTextInput(value, propagateChange) {
    this.renderer.setProperty(this.elementRef.nativeElement, 'value', value);
    if (propagateChange) {
        this.onChange(value);
    }
    this.value = value;
}

// ControlValueAccessor Interface
...

registerOnChange(fn: any): void {
    this.onChange = fn;
}

writeValue(value: string): void {
    value = value ? String(value) : '';
    this.updateTextInput(value, false);
}
}


function filterValue(value): string {
    return value.replace(/[^0-9]*/g, '');
}

使用法：

<input name="number" type="text" onlyNumber [(ngModel)]="someNumber">
— スピエララ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.