如何限制输入数字范围？答案

【问题标题】：How can I limit the input number range?如何限制输入数字范围？
【发布时间】：2023-03-04 17:20:01
【问题描述】：

我想限制输入的数字最多可以到当前年份，用户不能输入比当前年份高的年份。我该怎么做？

我的代码：

<ion-item>
  <ion-label>Year</ion-label>
  <ion-input [(ngModel)]="season.Year" type="number" ></ion-input>
</ion-item>

【问题讨论】：

标签： javascript angular typescript ionic-framework input

【解决方案1】：

使用普通的 HTML 输入属性，例如 min 和 max：

<ion-input [(ngModel)]="season.Year" type="number" min="1" max="5"></ion-input>

【讨论】：

【解决方案2】：

您可以为这些使用min 属性。由于您使用的是number 类型，因此只需添加min 属性：

<ion-input [(ngModel)]="season.Year" type="number" min="2018"></ion-input>

例子：

  Enter a date before 1980-01-01:
  <input type="date" name="bday" max="1979-12-31">

  Enter a date after 2000-01-01:
  <input type="date" name="bday" min="2000-01-02">

  Quantity (between 1 and 5):
  <input type="number" name="quantity" min="1" max="5">

【讨论】：

【解决方案3】：

如果你想硬核最大值，你可以这样做。

<ion-input [(ngModel)]="season.Year" type="number" min="19XX" max="2018"></ion-input>

如果您不想硬核当前年份，可以使用 Date 类或使用 moment.js 获取当前年份并将年份绑定到 html 中，如下所示。

 <ion-input [(ngModel)]="season.Year" type="number" min="19XX" max="{{maxyear}}"></ion-input>

【讨论】：