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




angularjs input (8)

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

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

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

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

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

नोट: मुझे यह केवल पाठ बॉक्स का उपयोग करने की आवश्यकता है और इनपुट संख्या प्रकार का उपयोग नहीं करना है।


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

<input type="number" name="quantity" min="1" max="5">

आप इसे इस तरह से प्राप्त कर सकते हैं

<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.keycode को वेब मानकों से हटा दिया गया है, और भावी ब्राउज़र अपडेट्स अब इसे समर्थन नहीं कर सकते हैं Https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode देखें

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

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 मान स्वीकार नहीं किया जाना चाहिए।

ध्यान दें कि मेरे समाधान में मैं कट, कॉपी और पेस्ट कार्यक्षमता को छोड़ नहीं रहा हूँ क्योंकि यह बग्स के लिए खिड़कियों को खोलता है, विशेषकर जब लोग संबद्ध क्षेत्रों में अवांछित पाठ पेस्ट करते हैं एक कुंजीपटल हैंडलर पर सफाई प्रक्रिया की आवश्यकता होगी; जो इस धागे का दायरा नहीं है।

यहाँ समाधान का प्रस्ताव है I

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

आप इस वैलिएटर को बना सकते हैं और इसे अपने घटक में आयात कर सकते हैं।
असल में फ़ॉर्म इनपुट स्ट्रिंग को मान्य करता है:

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

इसे अपने प्रोजेक्ट में कार्यान्वित करने के लिए:

  1. आपके ऐप फ़ोल्डर में सुझाव दिया गया पथ: src / app / validators / number.validator.ts
  2. आपके घटक में आयात करें

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

  3. इसे फ़ॉर्म नियंत्रण में जोड़ें
    inputNumber: ['', [NumberValidator.isInteger]],
  4. यदि आप अमान्य वर्णों को दिखाना नहीं चाहते हैं, तो इनपुट form.get('inputNumber').hasError('isInteger') इनपुट (change)="deleteCharIfInvalid()" के लिए इनपुट के लिए एक (change)="deleteCharIfInvalid()" बाँध (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;
    }        
}

जब से नैनपैड '1' पर दबाव डाला जाता है तो इस मैथोड को बचा जाना चाहिए।

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


आप angular2 निर्देशों का उपयोग कर सकते हैं। 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" />

अपने मॉड्यूल की घोषणाओं की सरणी में अपना निर्देश लिखने के लिए मत भूलना।

Regex का उपयोग करके आपको अभी भी कार्यात्मक कुंजी की आवश्यकता होगी

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

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

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

<input type="text" pattern="[0-9]+" >




angularjs-directive