时间戳

首页 > 解决方案 > 角度形式验证`min`不起作用

angular - 角度形式验证`min`不起作用

问题描述

我正在阅读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？

欢迎任何提示。谢谢

标签： angularangular5angular6angular-forms

解决方案

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

推荐阅读