当用户 clicks/moves 离开文本框时删除错误验证消息

Question

我正在 angular 中研究一种反应形式。面对这个问题，一个不需要的字段在变脏或被触摸时应该进行一些验证，但一旦用户离开这个 textbox/field，验证消息就应该消失。我试过使用 ng-invalid 但它不起作用，因为第一次加载时该字段具有 ng-invalid class。以下是代码-

<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'
}]

如何使此验证消失？

Answer 1

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

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

在这个代码示例中onFocus()是在用户clicks/is-in输入框时调用的。 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

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

当用户 clicks/moves 离开文本框时删除错误验证消息

Remove error validation message when user clicks/moves out of the textbox

javascript

typescript

angular

angular-reactive-forms

angular8