javascript - 如何在 AngularJS 中设置范围验证

Question

我想设置范围验证，即我希望工资应在 100000-20000000 之间。我使用了 ng-min 和 ng-max。但它仍然没有抛出错误消息。这就是我所做的。它唯一检查号码验证。

<input ng-model="name2" name="name2" type="text" class="zoomIn" ng-min="100000" ng-max="20000000" ng-pattern="/^\d+$/" placeholder="Your Annual Net Profit" required>
<div ng-messages="step5form.name2.$error">
<div ng-message="min">Please enter a value between 100000 and 20000000.</div>
<div ng-message="max">Please enter a value between 100000 and 20000000.</div>
<div ng-message="pattern">Annual net profit cannot be characters.</div>
</div>

Answer 1

我认为你应该尝试阅读AngularJs首先是文档。

这里您使用的是type="text"，对于类型文本，有ng-minlength和ng-maxlength，而对于>type="number" 有 min 和 ma​​x 属性。

<input ng-model="name2" name="name2" type="number" class="zoomIn" min="2" max="4" ng-pattern="/^\d+$/" placeholder="Your Annual Net Profit" required>
<div ng-messages="step5form.name2.$error">
<div ng-message="min">Please enter a value between 100000 and 20000000.</div>
<div ng-message="max">Please enter a value between 100000 and 20000000.</div>
<div ng-message="pattern">Annual net profit cannot be characters.</div>

希望这对您有帮助。

更新: 要删除输入微调器，请添加此 css

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
input[type="number"] {
    -moz-appearance: textfield;
}