角4入力[type = 'number']最小/最大での入力を防止します

Question

入力を防止するinputNumber指示を作成しようとしています（値が間違っている場合は入力を強調表示しませんが、でも入力値は） ：

A）文字や記号は、唯一[0-9] B）に対してminとmax paramsは C）greaterOrEqual/lessOrEqual特性を介してビュー内の他のそのような指示との関係であることに制限します。

これは私の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; 
    } 
} 

入力した文字/記号を防止するという点で、このすべての作品が、それは尊重数字に来るとき、ユーザはまだそれらの上に入力することでリミッタと、これを防ぐために、私の目的。 これにいくつかのSOスレッド（例：Don't allow typing numbers between max and min value）が見つかりましたが、多くの助けにはなりませんでした。

Answer 1

これは私があなたのケースを助ける、それはdoesn't数字以外の入力値を聞かせても、それは入力の他の便利なキーの間でCTRL + C、CTRL + Vを可能にすると確信していますディレクティブです。

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

私は単にあなたが独自のコンポーネントに分&最大を持つことが許可されていることを、あなたが剣道を使用することをお勧めします。

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

Answer 3

あなたのディレクティブができ、また、リスナー '入力' 変更。

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