时间戳

首页 > 解决方案 > 当用户单击/移出文本框时删除错误验证消息

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>

表单组验证 -

streetName:['',{
   Validators: [
   Validators.pattern(0-9),
   Validators.minLength(9),
   this.customValidations.streetValid
   ],
   updateOn: 'blur'
}]

我如何让这个验证消失？

标签： javascriptangulartypescriptangular8angular-reactive-forms

解决方案

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

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

在此代码示例onFocus()中，当用户单击/在输入框中时调用。onBlur()当用户点击输入框外时调用。

我们可以使用它来更好地区分我们是否应该显示错误消息。

假设您有两个输入：街道名称和街道地址。我们将创建一个onFocus()处理哪个项目被聚焦的onBlur()函数和一个清除聚焦选择的函数。

// Class variables
public selectedField = "";

function onFocus(identifier : string) {
     selectedField = identifier; // set the field
}

function onBlur() {
     selectedField = ""; // clear the field
}

现在，关于我们的输入：

<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

如果您想更好地了解焦点的工作原理，可以在此处找到。

推荐阅读