Angular2设置输入字段的最小值和最大值

Question

我是Angular2的新手。我试图将用户输入限制在110到5000之间的数字。我不想只做用户输入验证。我想阻止用户输入不同的值而不是110到5000之间的数字。我试着最大和最小，但它只适用于上下键击。

这是HTML部分：

<div class="form-group">
    <label for="flowRate">Flow Rate</label><br>
    <div class="input-group calc-addon-group">
      <input class="form-control addon-input" type="number" step="any" [(ngModel)]="tmpFlowRate" id="flowRate" onfocus="this.select();">
      <span class="input-group-addon units">{{settings.flowMeasurement}}</span>
    </div>
  </div>

Answer 1

我发现输入验证在Angular 2中是一场噩梦，这并不容易直截了当。如果你要进行大量的输入验证等，我建议过渡到使用模型驱动/反应表单。This resource是你需要的一个很好的起点。

我还建议过渡到Angular4。 Angular2的许多错误修复直接进入Angular4，大多数库正从Angular2转移到Angular4。您的Angular2代码不应该被大幅修改以进行转换。

Answer 2

在最新的Angular版本中，似乎已为min和max范围添加了验证程序，但已经回滚 - 请参阅issue此处。

与此同时，您可能最好使用正则表达式（模式）验证程序，或编写自己的自定义验证程序指令来强制执行有效的值范围。

有关自定义验证程序的信息，请参阅the official doco或Thoughtram下的示例。