How does one get the error message from an API in angular?

I am using Angular 6 and I have a service that attempts to create a record in the backend database by making POST request. I implement this request in a service like so:

... usual imports and other Angular boiler plate omitted for brevity ...

export class SitesService {

  constructor(private http: HttpClient) {}

  addSite(siteName){
    const url = environment.apiUrl + '/api/v1/spi/sites/';
    const body = { 'name': siteName };

    const header = new HttpHeaders({'Content-Type':  'application/json' });
    return this.http.post(url, body, { headers: header }).pipe(map ( res => <Site>res ));
  }

I make use of the above service in my component code:

... usual imports and Angular boiler plate omitted for brevity ...

export class SitesComponent implements OnInit {

  ... local variable declaration omitted ...

  constructor(private service: SitesService) {
       ... more unrelated code omitted ...


  addSite(siteName) {
    this.showLoader = true;
    this.service.addSite(this.siteName).subscribe(
      data => this.postSuccess(data),
      error => this.postError(error)
    );
  }

  private postError(error) {
      console.log('ERROR IS');
      console.log(error);
      ... omitted ...
  }

When the API responds with a BAD REQUEST 400 I know that it provides a message along with the status number 400. As I can see it in the browsers developer's console:

but all my postError() method does is write to the console this:

ERROR IS
Bad Request

I would like to be able to output name: This field is required..

Here is a screen shot that shows I am getting response code 400 and not 200.

UPDATE

It turns out someone on my team had already implemented an interceptor. Here is its code: (I added the console.log's).

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import {LoginService} from '../login/login.service'



@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
    constructor(private authenticationService: LoginService) {}
    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        return next.handle(request).pipe(catchError(err => {
          console.log('ErrirInterceptor err is:');
          console.log(err);
            if (err.status === 401) {
                // auto logout if 401 response returned from api
                this.authenticationService.logout();
            }
            const error = err.error.message || err.statusText;
            return throwError(error);
        }))
    }
}

When I access my troublesome api the console.log's output:

ErrirInterceptor err is:
error:
name: Array(1)
0: "This field is required."
...

But I still don't understand how to get that error message to my SitesComponent or SitesService classes.

UPDATE II

It turns out that the interceptor that was previously written didn't handle error responses generated by Django Generic Views so I updated it by changing this line ...

            const error = err.error.message || err.statusText;

... to this:

            const error = err.error.message || err.error.name || err.statusText;