Angular2 - इनपुट फ़ील्ड केवल संख्या स्वीकार करने के लिए

86

कोणीय 2 में, मैं एक इनपुट फ़ील्ड (टेक्स्टबॉक्स) को कैसे मुखौटा कर सकता हूं, जैसे कि यह केवल संख्याओं को स्वीकार करता है और वर्णानुक्रमिक वर्णों को नहीं?

मेरे पास निम्न HTML इनपुट है:

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

उपरोक्त इनपुट एक सामान्य पाठ इनपुट है जिसे या तो एक साधारण पाठ क्षेत्र के रूप में या संख्यात्मक क्षेत्र के रूप में उपयोग किया जा सकता है, उदाहरण के लिए, वर्ष दिखाने के लिए।

कोणीय 2 का उपयोग करते हुए, मैं उसी इनपुट नियंत्रण का उपयोग कैसे कर सकता हूं और इस क्षेत्र पर किसी प्रकार का फ़िल्टर / मास्क लागू कर सकता हूं, जैसे कि यह केवल संख्याओं को स्वीकार करता है?

इसे प्राप्त करने के विभिन्न तरीके क्या हैं?

नोट: मुझे इसे केवल टेक्स्टबॉक्स का उपयोग करके प्राप्त करना होगा और इनपुट नंबर प्रकार का उपयोग नहीं करना चाहिए।

html  angular  input  angularjs-directive 
— अनिरुद्ध पोंधे
स्रोत
1
क्या आप केवल html विशेषता का उपयोग कर पाएंगे? प्रकार = संख्या
— 13
@inoabrian मैं संख्या प्रकार का उपयोग किए बिना इसे प्राप्त करना चाहता हूं।
— अनिरुद्ध पांडे
यह आपकी मदद कर सकता है: stackoverflow.com/questions/39799436/…
— chandan7

जवाबों:

112

आप कोणीय 2 निर्देशों का उपयोग कर सकते हैं। Plunkr 

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 पैटर्न?
— अनिरुद्ध पांडे
3
यह कॉपी-पेस्ट की अनुमति नहीं देता है।
— शार्दुल
@ शार्दूल सिर्फ (e.keyCode == 86 && e.ctrlKey === true)शर्तों में जोड़ें , कॉपी काम कर रही है लेकिन पेस्ट काम नहीं कर रहा है
— अल-मोताफर
1
मैं अंतरिक्ष, प्लस और माइनस कैसे जोड़ूं?
— जाहिदुल इस्लाम रूहल
1
— राजा राम मोहन Thavalam
65

यदि आप एक निर्देश नहीं चाहते हैं

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

in घटक। html

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

घटक में

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
स्रोत
33
इस दृष्टिकोण के साथ समस्या यह है कि प्रमुख घटनाएं इनपुट फ़ील्ड को भरने वाले उपयोगकर्ता को चिपकाने या ब्राउज़र ऑटो पर कब्जा नहीं करती हैं। तो यह एक गरीब समाधान है।
— डैरिन होकिंग
30

मुझे पता है कि यह एक पुराना सवाल है, लेकिन चूंकि यह एक सामान्य मजाक है, मैं अपने द्वारा किए गए संशोधनों को साझा करना चाहता हूं:

  • कस्टम दशमलव विभाजक (बिंदु या अल्पविराम)
  • पूर्णांक या पूर्णांक और दशमलव के लिए समर्थन
  • सकारात्मक संख्या या सकारात्मक और नकारात्मक के लिए समर्थन
  • शुरुआत में माइनस साइन (-) है
  • माउस चिपकाने का समर्थन (कुछ सीमा के साथ हालांकि https://caniuse.com/#feat=clipboard )
  • मैक कमांड कुंजी के लिए समर्थन

  • ".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">
— एल्विस फर्नांडीज
स्रोत
मैंने अमान्य पेस्ट के लिए शून्य जोड़ने से रोकने के लिए सत्यापन विधि की अंतिम पंक्ति को बदल दिया। if (मान्य) {this.hostElement.nativeElement ['value'] = value?};
— अब्दुल रहमान ने
क्या आप कृपया ड्रैग भी जोड़ सकते हैं और सत्यापन भी छोड़ सकते हैं? इसके अलावा, मैंने देखा कि इनपुट फील्ड वैल्यू दशमलव विभाजक के लिए अग्रणी और अनुगामी के लिए 0 गद्देदार मान में बदल जाती है, लेकिन मान दो तरह से बाध्यकारी चर में अपडेट नहीं होता है। उदाहरण के लिए: [(NgModel)] = "myVariable", यहां, अगर हम टाइप करते हैं। 3 इनपुट फ़ील्ड में टेक्स्ट इनपुट में वैल्यू 0.3 पर बदल जाता है, लेकिन myVariable में वैल्यू अभी भी '.3' है।
— सुष्मिता सागर
हटाएं और दर्ज करें इनपुट गायब है, लेकिन वैसे भी समाधान बहुत अच्छा है
— ओलेग बोंडारेंको
29

मैं @omeralper द्वारा दिए गए उत्तर पर निर्माण करना चाहूंगा, जिसने मेरी राय में एक ठोस समाधान के लिए एक अच्छी नींव प्रदान की।

मैं जो प्रस्ताव कर रहा हूं वह नवीनतम वेब मानकों के साथ एक सरलीकृत और अद्यतित संस्करण है। यह ध्यान रखना महत्वपूर्ण है कि event.keycode वेब मानकों से हटा दिया गया है, और भविष्य के ब्राउज़र अपडेट अब इसका समर्थन नहीं कर सकते हैं। Https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyTode देखें

इसके अलावा, विधि 

String.fromCharCode(e.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();
        }
    }
}
— जीनपॉल ए।
स्रोत
यह वास्तव में एक दिलचस्प दृष्टिकोण है। क्या आपके पास पुराने तरीकों जैसे (e.keyCode == 67 && e.ctrlKey === true) का सहारा लिए बिना कॉपी / पेस्ट कार्यक्षमता को लागू करने के बारे में कोई सुझाव है ??
— एंडर 2050
1
मैंने व्यक्तिगत रूप से यह कोशिश नहीं की है, हालांकि आप इसी तरह कॉपी / पेस्ट की घटनाओं को सुन सकते हैं जो ट्रिगर हो गए हैं। वे एक क्लिपबोर्डइवेंट ( डेवलपर. mozilla.org/en-US/docs/Web/API/ClipboardEvent ) उत्पन्न करते हैं जिसमें वह डेटा होता है जिसे कॉपी / पेस्ट किया जा रहा है। एकमात्र दोष यह है कि यह अभी भी प्रयोगात्मक है और केवल नवीनतम ब्राउज़रों द्वारा समर्थित है - caniuse.com/#search=paste
— A.
मैंने एक समान दृष्टिकोण की कोशिश की, लेकिन दुर्भाग्य से यह हर मामले के लिए काम नहीं करता है। आपका "अगला" वैरिएबल मानता है कि दबाया गया चरित्र वर्तमान में टाइप किए गए मान के अंत में जा रहा है। यह हमेशा मामला नहीं है। उदाहरण के लिए, यदि कोई व्यक्ति 100 में टाइप करता है, और फिर 1 को सामने से जोड़कर 1100 बनाने का फैसला करता है। आपका "अगला" चर गलत (1001) होगा।
— कार्लोस रोड्रिग्ज
चूंकि 'अगला' मूल्य केवल यह जांचने के लिए उपयोग किया जाता है कि इनपुट राशि एक वैध दशमलव है (और मान सेट करने के लिए नहीं), इसे अंत में जोड़कर रेगेक्स सत्यापन को नहीं बदला जाएगा।
— जीनपॉल ए।
केवल मैं इस लाइन को इनपुट नियंत्रण में लागू करना चाहूंगा। <इनपुट myNumberOnly टाइप करें = "टेक्स्ट" id = "yourId">
— Lrodriguez84
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
जबकि यह समाधान काम करता है यह मॉडल परिवर्तन की घटनाओं को दो बार ट्रिगर करता है, ने कहा कि रेगेक्स का उपयोग करने का दृष्टिकोण सही है, यहां एक ऐसा संस्करण है जो दो बार इवेंट मॉडल को नहीं बदलता है: stackblitz.com/edit/…
— ntziolis
Ntziolis की टिप्पणी के लिए: अब तक बेन गुल्पा का समाधान मेरे लिए काम कर रहा है। लेकिन ntziolis द्वारा संदर्भित समाधान नहीं है। मुझे माफ कर दें अगर मैं गलत हूं, लेकिन ऐसा लगता है कि स्टैकब्लिट्ज के उपरोक्त लिंक पर कोड के साथ समस्या, मेरे लिए कम से कम, यह था कि मैंने जो अंतिम अवांछित चरित्र टाइप किया था, हालांकि यह उपयोगकर्ता इंटरफ़ेस में कभी नहीं दिखा, किसी तरह मिला मेरे घटक के बाध्य चर में डाल दिया। बस आखिरी अवांछित चरित्र।
— user2367418
मेरी टिप्पणी जारी रखने के लिए: कोणीय 7 और एक एचएमटीएल इनपुट पाठ का उपयोग करके दो वर्णों तक सीमित करें।
— user2367418
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

आपको पाठ के बजाय टाइप = "संख्या" का उपयोग करने की आवश्यकता है। आप अधिकतम और न्यूनतम संख्या भी निर्दिष्ट कर सकते हैं

<input type="number" name="quantity" min="1" max="5">
— जिया खान
स्रोत
2
मैं संख्या प्रकार का उपयोग किए बिना इसे प्राप्त करना चाहता हूं।
— अनिरुद्ध पांडे
3
संख्या प्रकार के लिए समर्थन अभी भी काफी छोटा है जैसा कि इस उत्तर में वर्णित है: stackoverflow.com/a/14995890/1156185
— निकोलस फ़ॉर्नी
9
नकारात्मक पक्ष type="number"यह है कि यह चरित्र eको वैज्ञानिक संकेतन के भाग के रूप में स्वीकार करता है
— user776686
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;
}

आशा है कि यह आपकी मदद करेगा।

— परदीप जैन
स्रोत
क्या आपक लिए इसे विस्तार से कहना संभव है? Event.charCode == 8 क्या कर रहा है?
— बोसारी
9

आप regex का उपयोग कर सकते हैं:

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

numericOnly(event): boolean {    
    let patt = /^([0-9])$/;
    let result = patt.test(event.key);
    return result;
}
— Aathreya
स्रोत
1
हाँ, यह मददगार है, लेकिन मैं अपने इनपुट क्षेत्र में दशमलव () भी चाहता हूँ
— रिंकू चौधरी
6

patternनीचे दिए गए इनपुट के लिए विशेषता का उपयोग करें :

<input type="text" pattern="[0-9]+" >
— बेहनम अज़ीमी
स्रोत
यह काम नहीं कर रहा है। जब आप टाइप करना शुरू करते हैं, तो आप अक्षर टाइप करते हैं कि यह गलत है
— Seyed-Amir-Mehrizi
6

मुझे पता है कि इसके बहुत सारे उत्तर हैं, लेकिन मुझे निम्नलिखित को संभालने की आवश्यकता थी (जो उत्तर में से कोई भी पूरी तरह से समर्थन नहीं करता है):

  • बहु-लाइनों के विकल्प के साथ टेक्सारिया का समर्थन
  • दशमलव या नकारात्मक संख्या
  • अधिकतम लंबाई प्रति पंक्ति
  • क्रॉस-ब्राउज़र समर्थन (क्रोम, एज, IE 11)
  • कट / पेस्ट संचालन और घटनाओं को संभालना

समाधान मुझे इस तरह से एक textarea को परिभाषित करने की अनुमति देता है:

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

}
— जेसन डब्ल्यू
स्रोत
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, ''));
  }

यह regex ऐसी /[^0-9]/gकिसी भी चीज़ को खोजता है जो एक नंबर नहीं है और .replaceमैंने इसे सेट करके कुछ भी नहीं बदला है। इसलिए जब कोई उपयोगकर्ता एक ऐसे चरित्र में टाइप करने की कोशिश करता है जो एक संख्या नहीं है (इस मामले में एक चरित्र जो नौ के माध्यम से शून्य नहीं है), ऐसा प्रतीत होता है जैसे कि पाठ बॉक्स में कुछ भी नहीं होता है।

— क्रिस्टोफर
स्रोत
4

खैर जीनपॉल ए और rdanielmurphy के लिए धन्यवाद। मैंने इनपुट क्षेत्र को केवल संख्या तक सीमित करने के लिए अपना स्वयं का कस्टम निर्देश बनाया था। साथ ही अधिकतम और न्यूनतम इनपुट विशेषताओं को जोड़ा। कोणीय 7 में भी काम करेंगे।

कोणीय

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

}

एचटीएमएल

<input type="text" class="text-area" [(ngModel)]="itemName" maxlength="3" appNumberOnly />
— Leox
स्रोत
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();
    }
}
— Agorreca
स्रोत
1
यह कमाल का है! @ अप्रत्यक्ष ({चयनकर्ता: "[inputNumericInput]"}) निर्यात वर्ग NumericInputDirective {@HostListener ()}
— Nate
1
अच्छा काम करता है। कॉपी पेस्ट में केवल साइड इफेक्ट देखा गया। यह बाहरी गैर-संख्यात्मक स्ट्रिंग्स की कॉपी पेस्ट की अनुमति देता है। Googled और एक बेहतर समाधान मिला जो इस @ stackblitz.com/edit/… को
— vinsinraw
4

मनमाना RegExp निर्देश

यहां छोटा निर्देश है जो अमान्य मान टाइप करने के लिए मनमाना regexp और ब्लॉक उपयोगकर्ता का उपयोग करता है

कोड स्निपेट दिखाएं

मास्क के लिए केवल संख्या का उपयोग करें

<input [allowedRegExp]="'^[0-9]*$'" type="text" ... >
— कामिल कीलवेज़्स्की
स्रोत
दुर्भाग्य से आप इस समाधान को circumflex + जो कुछ भी आप लिखना चाहते हैं, स्पैमिंग द्वारा ट्रिक कर सकते हैं।
— प्रोग्रोज़
3

बस एक निर्देश बनाएं और होस्टलिस्ट से नीचे जोड़ें:

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

अमान्य पाठ को रिक्त से बदलें। सभी कुंजी और कुंजी संयोजन अब IE9 तक सभी ब्राउज़रों में काम करेंगे।

— गौरव जोशी
स्रोत
यदि चार प्रकार के साथ शुरू करते हैं, तो चार भाग नहीं होंगे, लेकिन मॉडल की लंबाई की गिनती 1 होती है। इसे कैसे हल करें?। यदि तत्व में अधिकतम लंबाई है, तो मिश्रित सामग्री को कॉपी और पेस्ट करें, मॉडल की गिनती अधिकतम लंबाई होगी। उदाहरण के लिए, अधिकतम लंबाई 10 है, तो कॉपी और पेस्ट करें 1238261jhgjh12987 इनपुट करने के लिए केवल 123816 संलग्न करेगा लेकिन मॉडल की लंबाई 10. लेगी कोई समाधान?
— सत्येश नटराजन
3

मान्य मोबाइल नंबर पैटर्न के लिए पैटर्न ('^ ((+ + 91 -? | 0); [0-9] {10%: $)

टेक्स्ट बॉक्स पैटर्न से केवल संख्या स्वीकार करने के लिए पैटर्न ('[0-9] *')

विशिष्ट संख्या के साथ केवल संख्या स्वीकार करने के लिए संरक्षक जैसे: पिनकोड। पैटर्न ( '^ [0-9] {5} $')

— सतीश देवकर
स्रोत
2

मैंने उपरोक्त निर्देश और कार्यान्वित न्यूनतम, अधिकतम, अधिकतम गति में कुछ संशोधन किए हैं।

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

  }
}
— करण मिस्त्री
स्रोत
इनपुट क्षेत्र से अधिकतम लंबाई मान कैसे दें
— जेसन ब्रॉडी
<इनपुट आईडी = "COMN" वर्ग = "wb-e-inp-1__input" प्रकार = "पाठ" appNumberOnly अधिकतम गति = "10" /> काम कर
— जेसन ब्रॉडी
1

@omeralper के जवाब से। मैं थोड़ा बदल देता हूं जो पीरियड ascii (कीकोड 110,190) को स्वीकार नहीं करेगा। और का प्रयोग करें 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

आप इस Validator को बना सकते हैं और इसे अपने कंपोनेंट में आयात कर सकते हैं।
मूल रूप से इनपुट इनपुट स्ट्रिंग को मान्य करता है:

  • जाँच करें कोई डॉट नहीं है
  • स्ट्रिंग को संख्या में परिवर्तित करता है
  • चेक एक पूर्णांक है
  • चेक शून्य से अधिक है

इसे अपनी परियोजना में लागू करने के लिए:

  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;
    }        
}
— guillefd
स्रोत
Number.isInteger(Math.floor(control.value))हमेशा सच नहीं होगा? मुझे लगता है कि इसके parseFloatबजाय होना चाहिए ।
— एंडीइंटिटी
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

यहां एक आसान है: सरल निर्देश कुंजीडाउन घटना पर यह जांचता है कि एक कुंजी की लंबाई एक है और कुंजी एक संख्या नहीं है 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" />
— लहार शाह
स्रोत
यदि चार प्रकार के साथ शुरू करते हैं, तो चार भाग नहीं होंगे, लेकिन मॉडल की लंबाई की गिनती 1. लेता है कि कैसे हल करें?
— सत्येश नटराजन
जब आप लंबाई की जांच करते हैं, तो यह परिवर्तन करने से पहले और बाद में निर्देश में 0 रहता है। अगर किसी बिंदु पर यह एक है तो इसे 0 पर जल्दी वापस आना चाहिए।
— लाहर शाह
नहीं यह नहीं। बस टेम्पलेट में numModel.length को बांधने की कोशिश करें और लंबाई गिनती की जांच करें
— Satheesh Natarajan
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();
          }
        };

      }
    }

निर्देशन भी इसे करने का सबसे अच्छा तरीका है

— प्रमोद पाटिल
स्रोत
1
  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 समाधान काम करता है

— mehdi_abol
स्रोत
कृपया अपने कोड स्निपेट को प्रारूपित करने के लिए कोड ब्लॉक का उपयोग करें।
— यू.एस.
0

fromCharCode 'a' को 'numpad' 1 'पर दबाते समय लौटाता है, इसलिए इस मैथॉयड से बचा जाना चाहिए

(व्यवस्थापक: हमेशा की तरह टिप्पणी नहीं कर सकता)

— fdsfdsfdsfds
स्रोत
0

मैंने कॉपी / पेस्ट करने के बारे में बहुत सारी टिप्पणियां देखीं।

@Omeralper उत्तर को बंद करने के लिए, आप कॉपी / पेस्टिंग को संभालने के लिए केवल Number के निर्देश में पेस्ट इवेंट हैंडलर जोड़ सकते हैं: 

 @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

यदि आप प्राइमेंग और कोणीय 6 का उपयोग करते हैं या इसके बाद p-inputMask घटक है। यह अल्फा टाइपिंग और नकारात्मक मानों को रोकता है https://www.primefaces.org/primeng/#/inputmask

— dotista2008
स्रोत
0

आप एक निर्देश भी बना सकते हैं जो ControlValueAccessor इंटरफ़ेस को लागू करता है ( https://angular.io/api/forms/ControlValueAccessor ) को ।

यहाँ काम कर रहे उदाहरण देखें: https://stackblitz.com/edit/angular-input-field-to-accept-only-numbers

आप 'इनपुट' ईवेंट सुन सकते हैं और कीकोड की जांच करने की कोई आवश्यकता नहीं है। यह कॉपी और पेस्ट का समर्थन करता है और ControlValueAccessor इंटरफ़ेस के कारण कोणीय रूप एपीआई के साथ अच्छी तरह से एकीकृत करता है।

निर्देशक:

@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">
— spierala
स्रोत
0

कास्टिंग क्योंकि यह 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, ''));
  }
}
— Whisher
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.