Question

我的代码：

  <!-- Min price -->
  <div class="form-group">
    <label for="minprice">Min price</label>
    <input type="number"
           min="0"
           class="form-control" id="minprice"
           required
           [(ngModel)]="model.minprice" name="minprice"
           #minprice="ngModel">
    <div [hidden]="minprice.valid"
         class="alert alert-danger">
      Min price is required
    </div>
  </div>

  <!-- Max price -->
  <div class="form-group">
    <label for="maxprice">Min price</label>
    <input type="number" class="form-control" id="maxprice"
           required
           min="0"
           [(ngModel)]="model.maxprice" name="maxprice"
           #maxprice="ngModel">
    <div [hidden]="maxprice.valid"
         class="alert alert-danger">
      Max price is required
    </div>
  </div>

我有两个问题：

1，min="0"似乎不起作用。当我输入-1时，未显示错误消息。

2，如何验证minprice小于maxprice？

欢迎任何提示。谢谢

Answer 1

当您使用type =“ number”时，您的输入控件将使用向上/向下箭头填充以递增/递减数值，因此，当您使用这些按钮更新文本框值时，它不会通过最大限制，而是在您手动提供类似输入时不会验证最大限制，因此您必须通过代码对其进行验证

如果我使用formcontrolmodule，我会做类似的事情

 <input type="number" min="0" max="100"          name="MyInput" [formControl]="myInput">

然后在我的组件类中

this.myInput = new FormControl（“”，[Validators.max（100），Validators.min（0）]）

然后如果您登录myInput，您将在对象中看到一个错误键，然后可以使用该键显示和隐藏错误消息容器

角形验证“最小”无效

1 个答案: