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

【问题标题】：Form Validation empty field shown as invalid in Angular 2+表单验证空字段在 Angular 2+ 中显示为无效
【发布时间】：2019-05-11 04:32:25
【问题描述】：

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

简单示例：

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 之间的数字，我只会得到一个返回，说数字必须介于 0 和 1 之间。但是，问题出在我单击该字段然后单击退出时。我收到“需要数字”和“数字必须介于 0 和 1 之间”的两个错误。我将如何构建我的逻辑以便只显示错误消息“需要数字”？

【问题讨论】：

• 而不是name.invalid 使用<div *ngIf="name.errors.max || name.errors.min">
• 也可以将Validators.Compose([Validators.min(0.0001),Validators.max(0.9999),Validators.required]) 用于多个验证器
• 我把它改成了

  并且成功了！非常感谢！
• 我可以将此作为答案发布吗？你能接受吗？
• 作为答案发布