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

Question

我创建了一个包含两个数字输入框field1和field2的表单的网页。我正在对这些字段进行验证。field1的min值为1，max值为100000，但是field2应该有min值等于field1或1的max值，任何大于此值的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>

- SagarVimal

Answer 1

你接近了答案。对象priceminrange是一个Angular对象，包含多个与模型相关的方法和属性。你需要的属性叫做$modelValue，它包含用户输入的值，在解析为正确的数据类型后（在本例中为数字）。

如果你已经将输入元素封装在名为“form”的表单中，那么以下代码应该可以工作：

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

- Michael Venable

Answer 2

请尝试以下方法：

在控制器上创建作用域。

$scope.priceminrange = 1;

- Eder Ribeiro