當用戶單擊/移出文本框時刪除錯誤驗證消息

Question

我正在研究 angular 中的反應形式。 面對這個問題，當一個不需要的字段變臟或被觸摸時應該進行一些驗證，但是一旦用戶離開這個文本框/字段，驗證消息應該只是 go 了。 我嘗試使用 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() 。 當用戶點擊輸入框外時調用onBlur() 。

我們可以使用它來更好地區分我們是否應該顯示錯誤消息。

假設您有兩個輸入：街道名稱和街道地址。 我們將創建一個onFocus() function 來處理哪個項目被聚焦，以及一個onBlur() function 將清除聚焦選擇。

// 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

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