I'm developing a small project, and I'm still trying to understand some typescript stuff. In this case, I'm passing data from a form to an object, and from that object I'm passing it through an http service to an endpoint. This returns me the response in the console, when it is effective or there is some validation error. What I have no idea is how to get that error and display it to the user via a popup. I would appreciate a lot if you could help me.

onSubmitRegistro(){

  var formData: any = new FormData();

  formData.append('email', this.usuario.email);
  formData.append('password[first]', this.usuario.password1);
  formData.append('password[second]', this.usuario.password2);
  formData.append('userType', this.usuario.userType);
  formData.append('reside', this.usuario.reside);

  console.log(this.usuario);

  this.http.post<Errores_ep>('http://54.220.205.31/api/users/register', formData)
  .subscribe(data => {
      console.log(data);
  });

} }

But what matters is to show what is happening on the screen. For example, the api returns an error that the mail already exists

here ss:

I have tried and seen videos of something about observable, and httperror handler, but I really don't know what to use or how to handle it in the correct way.

CodePudding user response：

You can handling error like this;

this.authService.login(this.postData).subscribe(
    (res: any) => {
      console.log(res);
    },
    (err: any) => {
      alert(err.error.message);
    }
  );

But should sure what do you have in return err, you can try console.log(err.error) and see the what comes.