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

Question

我正在研究一种有角度的反应形式。面对这个问题，不需要的字段在变脏或被触摸时应该进行一些验证，但是一旦用户离开此文本框/字段，验证消息就应该消失。我尝试使用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>

FormGroup验证-

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

我如何消失此验证？

Answer 1

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

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

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

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

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

//Class variables
public selectedField = "";

function onFocus(string identifier) {
     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。

如果此答案解决了您的问题，请将此标记为正确答案。对于其他任何人，如果这也解决了您的问题，请给它投票。

如果有任何疑问，随时发表评论。