how to get sending data from restAPI after post response in angular 5?

Question

I have a problem with the output of the json object sent from the server, for some reason I can not get and display the message contained in the response from the server. What am I doing wrong? Thanks for any help. Below is the code for my application.

service :

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpRequest } from '@angular/common/http';
import { User } from './user';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

import { ResponseObject } from './response-object';

@Injectable()
export class MntApiService {

  private mntAPI = 'http://localhost:3000';

  constructor(private _http: HttpClient) {
  }
  getUsers(): Observable<any> {
    return this._http.get<any>(this.mntAPI + '/users');
  }
  addUser(email: string, password: string): Observable<any> {
    return this._http.post<any>(this.mntAPI + '/signup', { email, password }, )
    .map((response: Response) => response);
  }
}

component:

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { HttpErrorResponse, HttpResponse } from '@angular/common/http';
import { Router } from '@angular/router';

import { MntApiService } from '../mnt-api.service';

import { User } from '../user';
import { ResInterceptor } from '../res-interceptor';

@Component({
  selector: 'app-signup-page',
  templateUrl: './signup-page.component.html',
  styleUrls: ['./signup-page.component.scss']
})
export class SignupPageComponent implements OnInit {
  users: any = [];
  myForm: FormGroup;
  response: {
    body: {
      succes: boolean,
      message: string,
      status: number
    }
  };
  constructor(
    private mntApiService: MntApiService,
    private fb: FormBuilder,
    public routes: Router) {
  }

  ngOnInit() {
    this.initForm();
  }



  private initForm(): void {
    this.myForm = this.fb.group({
      // type: null,
      email: [null, [
        Validators.required, Validators.email
      ]],
      password: [null, [
        Validators.required
      ]]
    });
  }

  isControlInvalid(controlName: string): boolean {
    const control = this.myForm.controls[controlName];

    const result: boolean = control.invalid && control.touched;

    return result;
  }

  addUser() {
    const val = this.myForm.value;
    const controls = this.myForm.controls;
    if (this.myForm.invalid) {
      Object.keys(controls)
        .forEach(controlName => controls[controlName].markAsTouched());
      return;
    } else {
      val.email = val.email.trim();
      val.password = val.password.trim();
      if (!val.email && !val.password) {
        return;
      }
       this.mntApiService.addUser(val.email, val.password)
        .subscribe(user => {
          this.users.push(user);
        },
      response => { this.response = response; });
      console.log(this.response);
      return;

    }
  }
}

component.html

<div class="container pt-5">
  <form [formGroup]="myForm">
    <div class="form-group">
      <label for="email">Email address</label>
      <small class="form-text text-danger">
        {{response?.body.message}}
      </small>
      <input formControlName="email" type="email" class="form-control" id="email" placeholder="Enter email" autocomplete="email">
      <small *ngIf="isControlInvalid('email')" class="form-text text-danger">неправельный формат почты</small>
    </div>
    <div class="form-group">
      <label for="password">Password</label>
      <input formControlName="password" type="password" class="form-control" id="password" placeholder="Password"
        autocomplete="current-password">
      <small *ngIf="isControlInvalid('password')" class="form-text text-danger">это поле не может быть пустым</small>

    </div>
    <button (click)="addUser()"  class="btn btn-primary">Submit
    </button>
  </form>

</div>

and my node server code:

app.post('/signup', (req, res) => {

  let sql = 'SELECT email FROM users WHERE email = ?';
  let emailBody = [req.body.email];

  config.query(sql, emailBody, (err, userEmail) => {
    const errResponse = {
      sacces: false,
      message: 'Почта занята'
    };
    const rightResponse = {
      'sacces': true,
      'message': 'Пользователь создан',
      'status': 201
    };
    if (userEmail.length < 0) {
      res.status(409).send(errResponse);
      console.log('mail exist!!!!');
      return;
    } else {
      bcrypt.hash(req.body.password, 10, (err, hash) => {
        if (err) {
          return res.status(500).json({
            error: err
          });
        } else {
          let sql = 'INSERT INTO users ( email, password) VALUES ( ?, ?)';
          let email = req.body.email;
          let password = hash;
          let body = [email, password];
          config.query(sql, body, (err) => {
            if (err) {
              res.json({
                "message": 'SQL Error'
              });
            } else {
              //res.sendStatus(201);
              res.status(201).send(rightResponse);
              // res.status(201).json({
              //   'message': "Спасибо за регестрацию"
              // });
              console.log('User created');
              return;
            }
          });
        }
      });
    }
  });
});

please help who can, I'm a novice developer .

Answer 1

This is part of your code

   this.mntApiService.addUser(val.email, val.password)
    .subscribe(user => {
      this.users.push(user);
    },
  response => { this.response = response; });

What you are doing here it that you are passing the subscribe method 2 parameters. The first parameter is this function

user => {
          this.users.push(user);
        }

The second parameter is this function

response => { this.response = response; }

The function you pass to subscribe as second parameter gets executed when an error occurs, which I guess is not what you want.

Probably an implementation like this should do the trick for you

   this.mntApiService.addUser(val.email, val.password)
    .subscribe(response => {
      response => { this.response = response; });
      // this.users.push(user); CHECK THIS LINE - YOU ARE NOT RECEIVING A USER FROM THE SERVER BUT A MESSAGE
    };