html - angularjs ng model change




Angular2-Eingabefeld, um nur Zahlen zu akzeptieren (8)

Sie müssen stattdessen type = "number" eingeben. Sie können auch Max- und Min-Nummern angeben

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

Wie kann ich in Angular2 ein Eingabefeld (Textbox) so maskieren, dass es nur Zahlen und nicht Alphabete akzeptiert?

Ich habe folgende HTML-Eingabe:

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

Die obige Eingabe ist eine allgemeine Texteingabe, die entweder als einfaches Textfeld oder als numerisches Feld verwendet werden kann (z. B. um das Jahr anzuzeigen).

Wie kann ich mit angle2 das gleiche Eingabesteuerelement verwenden und eine Art Filter / Maske auf dieses Feld anwenden, so dass nur Zahlen akzeptiert werden? Was sind die verschiedenen Möglichkeiten, dies zu erreichen?

Hinweis: Ich muss dies nur mit Textfeld und ohne Eingabe-Nummer-Typ erreichen.


Sie können es so erreichen

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

hoffe das wird dir helfen.


Ich möchte auf die Antwort von @omeralper aufbauen, die meiner Meinung nach eine gute Grundlage für eine solide Lösung bot.

Was ich vorschlage, ist eine vereinfachte und aktuelle Version mit den neuesten Webstandards. Es ist wichtig zu beachten, dass event.keycode aus den Webstandards entfernt wird und zukünftige Browseraktualisierungen dies möglicherweise nicht mehr unterstützen. Siehe https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

Außerdem die Methode

String.fromCharCode(e.keyCode);

garantiert nicht, dass der Schlüsselcode, der zu dem vom Benutzer gedrückten Schlüssel gehört, dem erwarteten Buchstaben entspricht, der auf der Tastatur des Benutzers identifiziert ist, da unterschiedliche Tastaturkonfigurationen zu einem bestimmten Schlüsselcode mit unterschiedlichen Zeichen führen. Dies führt zu Fehlern, die schwer zu identifizieren sind, und kann die Funktionalität für bestimmte Benutzer leicht unterbrechen. Stattdessen schlage ich die Verwendung von event.key vor, siehe Dokumentation hier https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

Außerdem wollen wir nur, dass die resultierende Ausgabe eine gültige Dezimalzahl ist. Dies bedeutet, dass die Nummern 1, 11.2, 5000.2341234 akzeptiert werden sollten, aber der Wert 1.1.2 sollte nicht akzeptiert werden.

Beachten Sie, dass ich in meiner Lösung die Funktionen zum Ausschneiden, Kopieren und Einfügen ausschließen, da sie Fenster für Fehler öffnen, insbesondere wenn Benutzer unerwünschten Text in zugeordnete Felder einfügen. Dies würde einen Bereinigungsprozess für einen Keyup-Handler erfordern. was ist nicht der Umfang dieses Threads.

Hier ist die Lösung, die ich vorschlage.

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

Sie können diesen Validator erstellen und in Ihre Komponente importieren.
Überprüft grundsätzlich den Formulareingabe-String:

  • überprüfe, dass es keinen Punkt gibt
  • wandelt String in Zahl um
  • check ist eine ganze Zahl
  • Scheck ist größer als Null

Um es in Ihrem Projekt zu implementieren:

  1. vorgeschlagenen Pfad in Ihrem App-Ordner: src / app / validators / number.validator.ts
  2. Importieren Sie in Ihrer Komponente

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

  3. Fügen Sie es dem Formularsteuerelement hinzu
    inputNumber: ['', [NumberValidator.isInteger]],
  4. Wenn Sie das ungültige (change)="deleteCharIfInvalid()" möchten, binden Sie eine (change)="deleteCharIfInvalid()" an die Eingabe, wenn form.get('inputNumber').hasError('isInteger') true , löschen Sie das letzte eingefügte form.get('inputNumber').hasError('isInteger') .
// 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;
    }        
}

fromCharCode gibt 'a' zurück, wenn Sie auf den Nummernblock '1' drücken, so dass dieses Methoid vermieden werden sollte

(Admin: konnte nicht wie üblich kommentieren)


Sie können angular2-Anweisungen verwenden. 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();
        }
      }
  }
}

und Sie müssen den Anweisungsnamen in Ihrer Eingabe als Attribut schreiben

<input OnlyNumber="true" />

Vergessen Sie nicht, Ihre Anweisung in das Deklarations-Array Ihres Moduls zu schreiben.

Wenn Sie Regex verwenden, benötigen Sie immer noch funktionale Schlüssel

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

Verwenden Sie pattern Musterattribut für die Eingabe wie pattern :

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




angularjs-directive