显示验证错误消息（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>