Display validation error messages (Spring Boot, Angular CLI 7)

Question

I'am trying to display errors passed from backend (Spring Boot) to frontend (Angular CLI 7). Errors are passed on by the ResponseEntity.

I have a function that check for response

    OnRegister(user) {
      this.errorMessages = [];
      this.authenticationService.register(user)
      .subscribe(resp => {
          this.router.navigateByUrl('/pages/authentication/login');
        }, error => this.errorMessages.push(error.error)
      );
      console.log(this.errorMessages);
    }

Array errorMessages hold "ValidationMessage" objects - fields: field, message.

Console output:

[]
  0: Array(3)
    0: {field: "password", message: "Field password cannot be null."}
    1: {field: "passwordConfirm", message: "Field passwordConfirm cannot be null."}
    2: {field: "email", message: "Field email cannot be null."}

How can i get an element from this array.

It's not possible to use just:

<li *ngFor="let error of errorMessages">
  <p>{{error.message}}</p>
</li>

Answer 1

You need to iterate the message from spring into the string[] state named error.

error: (error: (any)) => {
          let errors = error.error.errors;
          for (let i = 0; i < errors.length; i++) {
            this.error.push(errors[i].field + " " + errors[i].message);
          }
        }

And then, you can show them in the your component html like this

<div class="alert alert-danger" role="alert">
   <ul>
      <li *ngFor="let error of error">{{error}}</li>
   </ul>
</div>