当我在 angular 4 中将 "Email" 输入留空时，两个验证器同时显示

Question

我正在 angular 4 种反应形式中实施验证。我的表格是这样的

我在 app.component.html 中的验证器代码在这里

    <label>Email
        <input type="text" formControlName="userEmail">
      </label>
      <div class="alert" 
   *ngIf="rForm.controls['userEmail'].hasError('required') && 
   rForm.controls['userEmail'].touched">Email is required</div>
      <div class="alert" 
  *ngIf="rForm.controls['userEmail'].hasError('email') && 
  rForm.controls['userEmail'].touched">Enter valid email</div>

问题是这样的，当我离开时 "Email field empty " 所以两个验证器都像这样同时显示

但我希望如果用户将 "Email" 字段留空，那么只显示必需的验证器，如果用户输入错误的语法，那么语法验证器应该显示我怎样才能做到这一点？

Answer 1

那

呢

<div class="alert" 
   *ngIf="rForm.controls['userEmail'].hasError('required') && 
   rForm.controls['userEmail'].touched">Email is required</div>
<div class="alert" 
      *ngIf="!rForm.controls['userEmail'].hasError('required') && rForm.controls['userEmail'].hasError('email') && 
      rForm.controls['userEmail'].touched">Enter valid email</div>

Answer 2

使用 ngIf

尝试 Else

 <label>Email
        <input type="text" formControlName="userEmail">
      </label>
      <div class="alert" 
   *ngIf="(rForm.controls['userEmail'].hasError('required') && 
   rForm.controls['userEmail'].touched); else formatError">Email is required</div>
<ng-template  #formatError >
      <div class="alert"
  *ngIf="rForm.controls['userEmail'].hasError('email') && 
  rForm.controls['userEmail'].touched">Enter valid email</div>
</ng-template>

当我在 angular 4 中将 "Email" 输入留空时，两个验证器同时显示

both validators are showing simultanously when i leave "Email" input empty in angular 4

angular

angular-reactive-forms