javascript - 使用 ng-pattern( Angular 新手)验证输入是否仅是最小和最大限制为 0-10000 的数字？

Question

这个问题已经有答案了:

How to set max and min value in angular js? (4 个回答)

已关闭 5 年前。

我有两个数字类型的输入字段，允许最小值 0 和最大值 10000 的范围。我如何使这两个字段允许最大值和最小值之间的数字，不允许超出该值。

我已尝试使用以下代码，请查看并帮助

<div class='panel'>
    <span>Min: $&nbsp;</span>
    <input id="text-input-1" class="width" type="number" placeholder="USD " ng-model="vm.min" ng-pattern="/^[0-9]{1,7}$/">
    <span>Max: $&nbsp;</span>
    <input id="text-input-1" class="width" type="number" placeholder="USD " ng-model="vm.max" ng-pattern="/^[0-9]{1,7}$/">
</div>

但是，根据我的问题，我只想在用户输入字段中不允许值超出我的范围。而不是显示消息

Answer 1

您可以使用<input type="number"/>的最小和最大属性并检查字段的有效性。

  <input id="text-input-1" min="0" max="10000" class="width" type="number" placeholder="USD" ng-model="vm.min">

或者您可以使用 ng-change 通过更新值(如果大于/小于最小值和最大值)来强制最小值和最大值，但我认为第一种方法更好。

html

<input id="text-input-1" type="number" ng-model="value" ng-change="setConstraints(value)">

js

  $scope.setConstraints = function(value){
    if(value > 10000){
      $scope.value = 10000;
    }

    if(value < 0){
      $scope.value = 0;
    }
  }

<强> Demo