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

Question

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

简单示例:

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>

typescript :

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

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

Answer 1

当您使用 name.invalid 时，您的 *ngIf 条件中有一个小错误，这对于任何类型的错误都始终成立。这就是您同时看到两条消息的原因。

将 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。