値が変更されなかった場合、ngModelを強制的に更新する方法はありますか？

Question

数字入力を0〜100の範囲に制限したいが、入力時には検証中ではない。

<input [ngModel]="value" (ngModelChange)="validate($event)" /> 

そして値が与えられた制限を超えているかどうかを確認：

public validate(value) { 
    if (value > 100) 
     this.value = 100; 
    if (value < 0) 
     this.value = 0; 
} 

そしてこのpartialy作品を私は値とemitt変更イベントをバインドするngModelを使用しています。しかし、150を入力しようとすると値が100に切り替わると、モデル値が100のままであるため、100以上の値を入力できるため、入力値は更新されません。手動でこの更新プログラムを強制実行する方法はありますか？

編集：私はここでかなり重要なビットを欠場しました。この動作は、type = numberの入力に対してのみ発生するようです。

public keyPress(event) { 
    let inputChar: number = +String.fromCharCode(event.charCode); 
    if (this.value + inputChar > 100 || this.value + inputChar < 0) { 
     // Exceeded limits, prevent input 
     event.preventDefault(); 
    } 
} 

Answer 1

は、ユーザーの入力を制限するために、正規表現を使用してください。ここで

ご入力のためのHTMLコードです：

<input [(ngModel)]="value" 
     (keypress)="keyPress($event)" 
     (ngModelChange)="validate($event)" 
     maxlength=3 /> 

...とtypescriptですコード：Plunker DEMO

：ここ

keyPress(event: any) { 
    const pattern = /[0-9]/; 
    let inputChar = String.fromCharCode(event.charCode); 

    if (!pattern.test(inputChar)) { 
     // invalid character, prevent input 
     event.preventDefault(); 
    } 
} 

validate(value:number) { 
    if(value>100) { 
     this.value=100; 
    } 
} 

は作業plunkerです

Answer 2

あなたは、変更を反映するために、他の部分を追加することができます：テキスト入力は文句を言わない100私の問題を回避するには、ファイサルはそうのようでpreventDefaultでkeypressイベントを使用して提案されたようです超えて。

public validate(value){ 
    if(value>100) 
     this.value=100; 
    else 
     this.value = value  
} 

Answer 3

別の方法私が知っているよう.. NgZone（AngularJs $scope.$apply()の同等品）を使用することです...のような：

constructor(private _ngZone:NgZone){ 

} 


public validate(value){ 
    if(value>100) 
     this.value=100; 
    if(value<0) 
     this.value=0; 

this._ngzone.run(()=>{ 
this.value=(value>100) ? 100 ? (value<0) ? 0 : 0; 
}); 

}