angular2輸入數字錯誤

我正在嘗試在單獨的輸入中創建具有小時，分鐘和秒的時間選取器組件。這應該控制在最小和最大的2個不同時間戳之間。angular2輸入數字錯誤

單獨的字段工作正常，最小和最大工作正常，但輸入不行。

我有

<input 
    type = number 
    name = hour 
    [ngModel] = _hour 
    (ngModelChange) = updateHour($event) 
    [min] = _minHour 
    [max] = _maxHour 
    placeholder = 00>

當進入88集最大到23（如預期），然後進入另一個8套ngModel到23（如預期），但輸入顯示238，（這是錯誤的）

我已經做了一次猛擊 https://plnkr.co/edit/XUWOim?p=preview

任何想法？

來源

2016-11-23 subarroca

不幸的是，這似乎是與天然元素的限制。它只會在提交時顯示錯誤消息： http://jsfiddle.net/TAftq/（從另一個stackoverflow主題獲取）。在Chrome中進行測試。似乎Firefox也不限制輸入值：https：//bugs.chromium.org/p/chromium/issues/detail？id = 365196 我想你需要使用第三方組件來解決這個問題。 –

我的解決辦法：

通輸入元素作爲參數updateHour功能

<input #hour 
     type = number 
     name = hour 
     [ngModel] = _hour 
     (ngModelChange) = "updateHour($event, hour)" 
     [min] = _minHour 
     [max] = _maxHour 
     placeholder = 00>

設定輸入值來修正值（驗證後）

updateHour(value:string, hourElement: ElementRef){ 
     let intValue: number = Math.max(this._minHour, Math.min(this._maxHour, parseInt(value))) || 0; 
     hourElement.value = intValue; 
     this.time.setHours(intValue); 
     }

不要忘記導入ElementRef

 import {Component, NgModule, OnInit, ElementRef} from '@angular/core'

來源

2016-11-23 13:21:02 Stopee

它是醜陋的，但它會發生。非常感謝！ – subarroca

angular2輸入數字錯誤

回答

相關問題