為什么（更改）function 只有在我第一次離開時才有效？

Question

我編寫了這段代碼來檢查總單詞是否至少為 3。當我輸入少於 3 個單詞並通過單擊外部或選項卡離開文本框時，我會工作。 但它只有在我第二次離開時才有效，即沒有錯誤。 所以我必須再次 go 並確保單詞少於三個並離開。 如何解決？

countTotalWords() {
    let str= this.model.FullName_AR;
    
    if(!str) {
      return;
    }

    let totalWords= str.split(' ')
           .filter(function(n: string) 
           { 
             return n != '' 
           })
           .length;

      if(totalWords < 3)
      {
        this.wordCountAchieved= false;
        Swal.fire(
         'minimum 3 words',
         'input minimum 3 words',
         'error'
        )
      }
      else {
        this.wordCountAchieved= true;
      }
  }

html

 <input type="text" #nameArabic (change)="countTotalWords()" class="form-control" id="nameAR" [(ngModel)]="model.FullName_AR" name="nameAR" #name="ngModel" required>

Answer 1

嘗試進行更改並查看第二次會發生什么，因為更改僅在檢測到內容更改時觸發。

Answer 2

你需要使用改變的模糊事件

 <input type="text" #nameArabic (blur)="countTotalWords()">