AngularJs : 在数字输入字段中设置条件最小值和最大值以进行验证

Question

我创建了一个网页，其中包含一个带有两个数字输入字段 field1 和 field2 的表单。我正在对这些字段进行验证。 field1 有一个 min 值 1 和 max 值 100000 但 field2 应该有 min 值是 max of field1 或 1 ，任何大于 max 的值都是 100000。我试图将 field1 的 ng-model 分配为 field2 的 min 但它不起作用。

<div class="row">
  <div>
    <input ng-model="priceminrange" name="priceminrange" type="number"
    class="form-control" value="" placeholder="MinRange" min="1" max="100000">
    <span ng-show="form.priceminrange.$error.number">The value is not a valid number</span> 
    <span ng-show="form.priceminrange.$error.min || form.priceminrange.$error.max">
    The value must be in range 1 to 100000</span>
  </div>
  <div>
    <input ng-model="pricemaxrange" name="pricemaxrange" type="number"
    class="form-control" value="" placeholder="MaxRange" min={{priceminrange}} max="100000">
    <span ng-show="form.pricemaxrange.$error.number">The value is not a valid number</span> 
    <span ng-show="form.pricemaxrange.$error.min || form.pricemaxrange.$error.max">
    The value must be in range {{priceminrange}} to 100000</span>
    form.pricemaxrange.$error = {{form.pricemaxrange.$error}}
  </div>
</div>

Answer 1

试试这个

在控制器上创建作用域。

$scope.priceminrange = 1;

Answer 2

你很接近。对象 priceminrange 是一个 Angular 对象，包含多个方法和属性，所有这些都与模型相关。你要的属性叫做$modelValue，里面包含了用户输入的值解析成正确的数据类型（这里是数字）后的值。

假设您已将输入元素包装在名为 "form."

的表单中，这样的事情应该可行

<input ng-model="pricemaxrange" type="number" min="{{form.priceminrange.$modelValue}}">

AngularJs : 在数字输入字段中设置条件最小值和最大值以进行验证

AngularJs : Set conditional min and max value for validation in number input field

javascript

angularjs

angularjs-directive