angular2输入数字错误答案

【问题标题】：angular2 input number errorangular2输入数字错误
【发布时间】：2016-11-23 12:40:30
【问题描述】：

我正在尝试创建一个时间选择器组件，该组件在单独的输入中具有小时、分钟、秒。这应该控制在 2 个不同的最小和最大时间戳之间。

单独的字段可以正常工作，最小值和最大值可以正常工作，但输入不行。

我有

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

当输入88 时将最大值设置为23（如预期）然后输入另一个8 将ngModel 设置为23（如预期）但输入显示238，（这是错误的）

我做了一个 plunker https://plnkr.co/edit/XUWOim?p=preview

有什么想法吗？

【问题讨论】：

不幸的是，这似乎是原生元素的限制。它只会在提交时显示错误消息：jsfiddle.net/TAftq（从另一个 stackoverflow 主题获取）。在 Chrome 中测试。 Firefox 似乎也不限制输入值：bugs.chromium.org/p/chromium/issues/detail?id=365196 我想你需要使用 3rd 方组件来解决这个问题。

标签： angular input

【解决方案1】：

我的解决方案：

在 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'

【讨论】：

它很丑，但它会发抖。非常感谢！