1

I'm facing this with Angular 9. There is already a question (asked 7 years ago):

TypeError: this is undefined

But it wasn't very helpful. I checked other questions also like this:

Angular2 component's “this” is undefined when executing callback function

I want to call a method with every keystroke on an input field.

HTML

<input ... type="text" (input)="crossCheckUsername()" placeholder="Enter username">

Typescript

constructor(..., private _userService: UserService) { 
   // nothing here 
}

ngOnInit() {
  // nothing here
}

// users is defined properly; it is hard coded in the starting only

isUserExists(): boolean {
  let userExists = false;
  this.users.forEach(function (user) {
    if(*some logic*) {
        userExists=true;
    }
    else {
      userExists=false;
    }
  })
  return userExists;
}

crossCheckUsername() {  // this method will be called on every key stroke
  if(this.isUserExists()) {
    console.log("Try a different username");
  }
  else {
    //do nothing; keep typing
  }
}

But I'm getting this with every keystroke:

enter image description here

Please correct my mistake.

6
  • May you check your user object, Might be property doesn't exists or property is not instantiated your are acessing with in users loop, otherwise function looks OK. Commented Aug 22, 2020 at 14:10
  • @user_mat, ya ya users is already defined. In fact it is hard coded. Trust me :-) I just edited the question also. Please check once more. Commented Aug 22, 2020 at 14:11
  • I am saying, Property you are trying to access, for example user.obj.Name, then check whether obj is instantiated or not. Commented Aug 22, 2020 at 14:16
  • @user_mat, Yes it is intaintiated. I checked on console also. Values are coming. Can we have a skype call. I want to show you the code. Commented Aug 22, 2020 at 14:19
  • 1
    try to avoid putting words or phrases in brackets in your title, as if the question is closed or deleted or something, the action will be inside brackets in the title. Commented Aug 22, 2020 at 16:02

1 Answer 1

1

Working solution:

HTML:

<input formControlName="username" type="email" class="form-control" id="usernameInput" (input)="crossCheckUsername($event.target.value)" placeholder="Enter username">

Component.ts:

crossCheckUsername(username: any) {

    for (let i = 0; i < this.users.length; i++) {
      if (this.users[i].email == username) {
        console.log("already exists");
      }
      else {
        console.log("ok keep typing");
      }
    }
    
  }
Sign up to request clarification or add additional context in comments.

6 Comments

No bro. Its not working. :-( There's no error but now it is returning true every time.
Then I need to check your code, why userExists is returning True every time, without knowing the actual working it would be difficult to know the reason behind..
Just for checking, can you edit as below and confirm for false: if('a'=='b') { userExists=true; } else { userExists=false; }
we are on the same time zone brother. Please can we take this outside stackoverflow. like skype or whatsapp call. Because I'm blocked with this error.
Yes sure, it's fine for me :)
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.