入力テキストのangular2の範囲を制限する方法は？

Question

私は入力テキストフィールドを持っています。 <input type="text" [ngModel]="textvalue | currencyinrhello" (ngModelChange)="onTextChange($event)" (keypress)="restrictNumeric($event)" /> 私は入力の値を15,000から5,00,000に制限します。私は、ユーザーがそれ以上の数字を入力しないようにします。

Answer 1

HTML5ネイティブを使用できます。あなたは角度2のコードは必要ありません。フォームの検証にのみ使用します。範囲内にない数字や無効な文字を入力すると、フォームは無効になります。 angular2ように

<input type="number" name="quantity" min="15000" max="5000000">

Answer 2

、あなたはディレクティブを使用することができます。その後、

@Directive({ 
    selector: '[restrict]', 
}) 
export class InputRestricter{ 


@Input('restrict_minvalue') minValue: number; 
constructor(private el: ElementRef,private renderer: Renderer) { 

}  
@HostListener('keyup',['$event']) onKeyUp(event){ 
    if(this.minValue){ 
     let el = <HTMLSelectElement> event.target; 
     if ($(el).val() <= this.minValue) { 
      el.setCustomValidity('Value is invalid'); 
     } else { 
      el.setCustomValidity(''); 
     } 
    } 
} 

と入力値があなたが同じように最大値の能力を実装することができ、15000未満の場合ディレクティブは、あなたの入力は無効になります

<input restrict [restrict_minvalue]="15000"/> 

テンプレートにディレクティブを使用しています。

Answer 3

はこのような何かをしようと、私が使用しているからkeyupイベント

import {Component, Input} from 'angular2/core'; 
@Component({ 
    selector: 'app', 
    template: ` 
    <label>Enter the Amount:</label> 
    <input type="text" #textbox [(ngModel)]="textvalue" (keyup)="restrictNumeric($event, textbox.value, 15000, 500000)" /> 
    ` 
}) 
export class App { 
    string: textvalue; 
    restrictNumeric(event, value, min, max) 
    { 
    if(parseInt(value) < min || isNaN(parseInt(value))) 
     console.log("invalid min value"); 
    else if(parseInt(value) > max || isNaN(parseInt(value)) 
     this.textvalue = 500000; 
    } 
}