Angular中input[type=number]达到最大值后可否重置为最小值0？

算力阿峰

2026-10-5

Angular 小时选择器循环滚动实现方案

实现思路

原生input[type=number]默认到达max值后不会自动循环，我们可以通过监听数值变化事件，手动计算并覆盖输入框的值实现23→0、0→23的循环效果。

操作步骤

1. 修改模板代码，给输入框绑定事件

给原有的input标签新增input事件、上下方向键监听事件：

<div class="col-md-3">
    <label for="exampleFormControlInput1" class="form-label">Hour</label>
    <input 
        type="number" 
        min="0" 
        max="23" 
        class="form-control" 
        formControlName="hour"
        (input)="handleHourChange()"
        (keydown.arrowup)="adjustHour(1)"
        (keydown.arrowdown)="adjustHour(-1)"
    >
</div>

2. 组件类中添加处理逻辑

在对应ts文件中编写数值校验和循环赋值的逻辑：

// 先获取对应表单控件，假设你的表单组名为form
private get hourControl() {
  return this.form.get('hour') as FormControl;
}

handleHourChange() {
  const current = Number(this.hourControl.value);
  // 处理直接输入超过范围的数值
  if (current > 23) {
    this.hourControl.setValue(0, { emitEvent: false });
  } else if (current < 0) {
    this.hourControl.setValue(23, { emitEvent: false });
  }
}

adjustHour(step: number) {
  let target = (Number(this.hourControl.value) || 0) + step;
  if (target > 23) target = 0;
  if (target < 0) target = 23;
  this.hourControl.setValue(target);
}