Angular data synchronization issue

Question

I wanted to retrieve an information from backend if some email address from input already exists. Based on this information I'm calling a function that make a post that inserts user into database. The problem is that user is inserted only after second click on my SignUp button (function registerUser is called on this button).

Component stuff:

 registerUser(form: NgForm) {
    let date: Date = new Date();
    this.newUser.registrationDate = date;
    this.checkEmailStatus();  //IMPLEMENTATION BELOW
      if (this.signupForm.valid === true && this.emailStatus) {
      this.portfolioAppService.registerUser(this.newUser).subscribe((data) => {
        this.clearFields();
        this.navigateToLogin();
      },
        error => console.error(error)
      );
    }
  }

  checkEmailStatus() {
    this.portfolioAppService.checkEmailStatus(this.newUser.email).subscribe((data: string) => {
      if (data != "") {
        this.emailStatus = true;
      }
      else this.emailStatus = false;
    },
      error => console.error(error)
    );
  }

Here is my service:

  checkEmailStatus(email: string): Observable<string> {
    return this.http.get<string>(`/api/Users/CheckEmailStatus_${email}`, this.httpOptions);
  }

Here is backend:

    [HttpGet]
    [Route("~/api/Users/CheckEmailStatus_{email}")]
    public string CheckEmailStatus(string email)
    {
        try
        {
            User user = _context.Users.Where(u => u.Email == email).FirstOrDefault();
            if (user != null)
            {
                return user.Email;
            }
            else
            {
                return "";
            }

        }
        catch (Exception e)
        {
            throw new Exception("Error!");
        }

    }

score 1 · Accepted Answer · answered Mar 29 '20 at 21:35

Call to this.portfolioAppService.checkEmailStatus() is asynchronous. So when you check if (this.signupForm.valid === true && this.emailStatus) after the this.checkEmailStatus() call, the variable this.emailStatus is still undefined. To fix it, you could return an observable from the checkEmailStatus() in the component. Try the following

Component

registerUser(form: NgForm) {
  let date: Date = new Date();
  this.newUser.registrationDate = date;
  this.checkEmailStatus().pipe(take(1)).subscribe(status => {
    if (this.signupForm.valid === true && status) {  // <-- check the status of email address
      this.portfolioAppService.registerUser(this.newUser).subscribe((data) => {
        this.clearFields();
        this.navigateToLogin();
      },
        error => console.error(error)
      );
    }
  });
}

checkEmailStatus() : Observable<boolean> {
  const result = new Subject<boolean>();

  this.portfolioAppService.checkEmailStatus(this.newUser.email).subscribe(
    (data: string) => {
      if (data !== '') {
        result.next(true);
      }
      else result.next(false);
    },
    error => { 
      console.error(error);
      result.next(false);
    }
  );

  return result.asObservable();
}

Angular data synchronization issue

1 Answers1