Why does the (change) function work only if I leave for first time?-CodePudding

I have written this code to check if the total words are atleast 3. I tworks when I put less than 3 words and leave text box by clicking outside or tab. but it only works first time if I leave 2nd time it doesn't hit i.e. no error. So i have to go again and make sure words are less than three and leave. How to fix it?

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()"  id="nameAR" [(ngModel)]="model.FullName_AR" name="nameAR" #name="ngModel" required>

CodePudding user response：

Try making a change and see what happens the second time round because change only triggered when it detects a change to the content.

CodePudding user response：

you need to use blur event insted of change

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