Javascript 当用户单击/移出文本框时删除错误验证消息

我正在做一个角度的反应形式。面对这个问题，当一个不需要的字段变脏或被触摸时，它应该进行一些验证，但是一旦用户离开这个文本框/字段，验证消息就应该消失。我尝试过使用ng invalid，但它不起作用，因为在第一次加载时，字段具有ng invalid类。下面是代码-

<div class="form-group">
   <label>Street Name</label>
   <input type="text" class="form-control" formControlName="streetName">
   <span class="text-danger"
      *ngIf="registerForm.get('streetName').touched || registerFormControl.get('streetName').dirty" class="Required">
   <span  *ngIf="registerForm.get('streetName').error?.pattern || registerForm.get('streetName').error?.minLength">
   Pattern & Minlength error
   </span>
   <span class="text-danger"
      *ngIf="registerForm.get('streetName').error?.monthError || registerForm.get('streetName').error?.otherError">
   Month and Other Error
   </span>
   </span>   
</div>

---

如何获得此验证信息？

您可以使用焦点和模糊事件来跟踪用户是否在输入字段中以及何时在输入字段中

<input (focus)="onFocus()" (blur)="onBlur()">

现在，关于我们的投入：

<input  (focus)="onFocus('streetName')" (blur)="onBlur()" type="text" class="form-control" formControlName="streetName">
<input (focus)="onFocus('streetAddress')" (blur)="onBlur()" type="text" class="form-control" formControlName="streetAddress">

最后，我们可以处理是否显示错误消息。我们需要做的就是在错误范围的*ngIf中再添加一个条件

<!--Example Street Name Error Span -->
<span class="text-danger" *ngIf="selectedField == 'streetName' && . . . ">
     Invalid Street Name
</span

<!--Example Street Address Error Span -->
<span class="text-danger" *ngIf="selectedField == 'streetAddress' && . . . ">
     Invalid Street Address
</span

无效的街道名称
当您有
更新：“”blur
时，您的验证消息本身将出现在blur上。
<input  (focus)="onFocus('streetName')" (blur)="onBlur()" type="text" class="form-control" formControlName="streetName">
<input (focus)="onFocus('streetAddress')" (blur)="onBlur()" type="text" class="form-control" formControlName="streetAddress">

<!--Example Street Name Error Span -->
<span class="text-danger" *ngIf="selectedField == 'streetName' && . . . ">
     Invalid Street Name
</span

<!--Example Street Address Error Span -->
<span class="text-danger" *ngIf="selectedField == 'streetAddress' && . . . ">
     Invalid Street Address
</span