Angular2 – Eingabefeld, um nur Zahlen zu akzeptieren

Question 1

Wie kann ich in Angular 2 ein Eingabefeld (Textfeld) so maskieren, dass es nur Zahlen und keine Buchstaben 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 generische Texteingabe, die entweder als einfaches Textfeld oder als numerisches Feld verwendet werden kann, um beispielsweise das Jahr anzuzeigen.

Wie kann ich mit Angular 2 dieselbe Eingabesteuerung verwenden und eine Art Filter/Maske auf dieses Feld anwenden, sodass nur Zahlen akzeptiert werden?

Was sind die verschiedenen Möglichkeiten, wie ich dies erreichen kann?

Hinweis: Ich muss dies erreichen, indem ich nur ein Textfeld verwende und nicht den Eingabenummerntyp.

Question 2

Wenn Sie keine Direktive wollen

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

in komponente.html

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

in komponente.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;

  }
}

Question 3

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

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 wurde und zukünftige Browser-Updates dies möglicherweise nicht mehr unterstützen. Sehen https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

Außerdem die Methode

String.fromCharCode(e.keyCode);

garantiert nicht, dass der keyCode, der sich auf die vom Benutzer gedrückte Taste bezieht, dem erwarteten Buchstaben entspricht, der auf der Tastatur des Benutzers identifiziert wird, da unterschiedliche Tastaturkonfigurationen zu unterschiedlichen Zeichen eines bestimmten Tastencodes führen. Wenn Sie dies verwenden, werden Fehler eingeführt, die schwer zu identifizieren sind und die Funktionalität für bestimmte Benutzer leicht beeinträchtigen können. Vielmehr 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. Das bedeutet, dass die Zahlen 1, 11.2, 5000.2341234 akzeptiert werden sollen, aber der Wert 1.1.2 nicht akzeptiert werden soll.

Beachten Sie, dass ich in meiner Lösung die Funktionen zum Ausschneiden, Kopieren und Einfügen ausschließe, da sie Fenster für Fehler öffnen, insbesondere wenn Benutzer unerwünschten Text in zugehörige Felder einfügen. Das würde einen Bereinigungsprozess auf einem Keyup-Handler erfordern; was nicht Gegenstand dieses Threads ist.

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

Question 4

Eine kürzere Lösung. Probieren Sie diese Direktive aus.

Kann auch verwendet werden, wenn Sie ReactiveForms verwenden.

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, ''));
  }
}

Verwenden Sie es für Ihre Eingaben wie folgt:

<input matInput formControlName="aNumberField" numberOnly>

Question 5

Sie müssen type=”number” anstelle von text verwenden. Sie können auch maximale und minimale Zahlen angeben

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