Angular2 display .NET API validation messages

Question

I am transacting .NET API through Angular2(honestly.. 5) I implement server side-model validation using Data Annotations Attributes. As such, the API returns bad request(404) with the validation messages attached:

if (!ModelState.IsValid)
                return this.BadRequest(ModelState); 

My issue has to do on how to display those messages in my angular view.

My Angular service:

  submitForm(formObj: FormDto) {
    let headers = new HttpHeaders();
    headers = headers.append('Content-Type', 'application/json; charset=utf-8');

    return this.http.post("/api/Forms", JSON.stringify(formObj), { headers })
          .map((res: Response) => console.log(res));
         //need a .catch here obviously ??????
      }

and the way I call the service from the component itself:

  submitForm() {
    this.formService.submitForm(this.formObj)
      .subscribe(res => { console.log(res);

          //update this bit to display error messages ?????
                      });
   }

Again, my issue is how to display properly the returned validation error messages coming from the .NET API.

Answer 1

Let's star with the fact that the modelState is coming as an object(key-value pairs). Thus, you can access the object in view by a specific key. You can have a variable in your component and store the modelState object in it.

To the point....

I wouldn't touch the Angular service at all, but the way you subscribe to it in order to separate success and failed callback:

 submitForm() {
    this.formService.submitForm(this.formObj)
            .subscribe((data) => //do what ever on success,
                        (err) => { this.errors= err.error; });
   }

After that, you are able to see your error messages in the view. Something like:

<span class="error-message">{{errors['EmailAddress']}}</span>

Put the line above to every input it's needed but change the key to view the right message. I've done a quick demo and is working.

I hope that helped.