Question

我正在尝试使用反应式表单验证对表单进行一些表单验证。但是，在检查被触摸和弄脏的字段时遇到了一些问题。

简要示例：

HTML：

<input id="name" class="form-control"
      formControlName="name" required >

<div *ngIf="name.invalid && (name.dirty || name.touched)"
    class="alert alert-danger">

  <div *ngIf="name.errors.required">
    Percent is required.
  </div>

  <div *ngIf="name.invalid">
    Number must be between 0 and 1
  </div>

</div>

打字稿：

name: ['', [Validators.min(0.0001),Validators.max(0.9999),Validators.required]],

所以我的表单逻辑是正确的。如果我输入的数字不在0到1之间，则只会得到一个返回值，表示Number必须在0到1之间。但是，问题出在我单击该字段然后单击退出时。我同时收到“必须输入数字”和“数字必须在0到1之间”的两个错误。如何构造逻辑，以便仅显示错误消息“需要数字”？

Answer 1

在使用*ngIf时，您的name.invalid条件中存在一个小错误，这对于任何类型的错误都是正确的。这就是为什么您同时看到两个消息的原因。

而不是name.invalid更改为如下所示-

<input id="name" class="form-control"
      formControlName="name" required >

<div *ngIf="name.invalid && (name.dirty || name.touched)"
    class="alert alert-danger">

  <div *ngIf="name.errors.required">
    Percent is required.
  </div>

  <div *ngIf="name.errors.max || name.errors.min">
    Number must be between 0 and 1
  </div>

</div>

现在，如果输入的值不在0到1之间，它将仅显示消息Number must be between 0 and 1。

表单验证空白字段在Angular 2+中显示为无效

1 个答案: