如何在值沒有改變時強制ngModel更新？

我想限制數字輸入到0-100範圍，但在輸入上，而不是在驗證期間。我使用ngModel綁定值和emitt改變事件：如何在值沒有改變時強制ngModel更新？

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

，然後檢查值超過規定限度：

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

這partialy作品。但是，如果我說試着輸入150並且數值會切換到100，那麼我可以輸入超過100的任何數據，因爲模型值保持爲100，所以輸入值不會更新。有沒有辦法手動強制這個更新？

編輯：我錯過了很重要的一點。這種行爲似乎只發生在輸入type = number的情況下。文本輸入不會超過100個。我的解決方法是使用費薩爾按鍵事件具有的preventDefault像這樣建議：

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

來源

2017-08-07 K. Kowalczyk

使用正則表達式來限制用戶輸入。

這裏是您輸入的HTML代碼：

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

..和打字稿代碼：

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：Plunker DEMO

來源

2017-08-07 14:03:33 Faisal

該解決方案適合您嗎？ – Faisal

這不適用於輸入類型編號，但是如果我檢查按鍵如果模型值+輸入字符超過100，它似乎是補丁我有。不是很乾淨的解決方案，但工作。謝謝。 –

您可以添加其他部分，以反映變化。

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

來源

2017-08-07 12:52:03

模型值是正確的，但由於它沒有改變（如果模型值是100，並且我輸入1000，它仍然是100），輸入字段沒有更新以反映這個模型。 –

另一種方式..我所知是用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; 
}); 

}

來源

2017-08-07 13:09:01

如何在值沒有改變時強制ngModel更新？

回答

相關問題