Angular 表单验证 `min` 不起作用

Question

我正在阅读 https://angular.io/guide/forms .

我的代码:

  <!-- 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，您将在对象中看到一个错误键，然后您可以使用它来显示和隐藏错误消息容器