Angular 4 Eingang [Typ = 'Nummer'] verhindern Eingabe über Min/Max

Question

Ich versuche, eine inputNumber Direktive zu machen, die Eingabe verhindert (nicht die Eingabe hervorheben, wenn Wert falsch ist, aber sogar Eingabe in falschen Wert) : nur auf [0-9] b) bezüglich

a) Buchstaben und Symbole, und beschränken minmax params c) werden im Verhältnis mit anderen Richtlinien, in der Ansicht über greaterOrEqual/lessOrEqual Eigenschaften.

Das ist mein input-number.directive.ts:

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

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

    @Input() min: number = 0; // will be input 
    @Input() max: number = 100; // will be input 

    @Input() greaterOrEqual: number = 23; // will be input 
    @Input() lessOrEqual: number = 77; // will be input 

    @HostListener('keypress', ['$event']) sanitizeValue(event: KeyboardEvent): boolean { 

     const targetVal: number = Number((<HTMLInputElement>event.target).value); 

     if (event.charCode >= 48 && event.charCode < 58) { 
      if (this.min !== null && targetVal < this.min) { 
       return false; 
      } 
      if (this.max !== null && targetVal > this.max) { 
       return false; 
      } 
      if (this.greaterOrEqual !== null && targetVal < this.greaterOrEqual) { 
       return false; 
      } 
      return !(this.lessOrEqual !== null && targetVal > this.lessOrEqual); 
     } 
     return false; 
    } 
} 

Das alles funktioniert in Bezug auf die Verhinderung von Buchstaben/Symbole eingeben, aber wenn es zu respektieren Zahlen kommt Begrenzer Benutzer noch in der Lage ist, sie über und mein Ziel zu geben, dies zu verhindern . Ich habe einige SO-Threads (z. B. Don't allow typing numbers between max and min value) gefunden, aber es hat mir nicht viel geholfen.

Answer 1

Dies ist eine Richtlinie bin ich sicher, wird Ihren Fall helfen, läßt Dabei spielt es keine andere Eingabe andere Werte als Zahlen, sondern auch ermöglicht es STRG + C, STRG + V unter anderem nützlichen Tasten für Eingaben.

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

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

    constructor(private el: ElementRef) { } 

    @Input() NumericInput: boolean; 
    @Input() latestInputValue: number; 

    @HostListener('keydown', ['$event']) onKeyDown(event) { 
     let e = <KeyboardEvent> event; 
     console.log(this.latestInputValue); 

     if (this.NumericInput) { 
      if (this.latestInputValue < 0 || this.latestInputValue > 100) { 
       e.preventDefault(); 
      } else 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(); 
      } 
     } 
    } 
} 

HTML

<input NumericInput="true" [latestInputValue]="someValue" [(ngModel)]="someValue" > 

Answer 2

Ich empfehle Ihnen, Kendo zu verwenden, mit dem Sie einfach eine min & max auf einer eigenen Komponente haben können.

<kendo-numerictextbox [value]="value" [min]="0" [max]="100"> 
</kendo-numerictextbox> 

Answer 3

Ihre Richtlinie kann auch Änderungen 'Input' Zuhörer.

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

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

    private el: HTMLInputElement; 

    constructor(private elementRef: ElementRef) { 
    this.el = this.elementRef.nativeElement; 
} 
    @HostListener('input',['$event'])onchange(event:any){ 
    let value=this.el.value; 
    let lastchar = value.substr(value.length - 1); 
    let bool=lastchar.match(/[0-9]/); 
    if (bool){ //if last character match a regExpr 
     bool=parseInt(value)>=0 && parseInt(value)<100; //and the condition required 
    } 
    if (!bool){ //if it does not meet the conditions 
     value=value.substr(0,value.length-1); 
     this.el.value=value; 
     //it's necesary dispatch the event 'input' manually 
     let event = new Event('input', { bubbles: true }); 
     this.el.dispatchEvent(event); 
    } 
    }