Angular: I keep on getting error 400: bad request "One or more validation error occured" when using httpPost

Question

Service.ts

  addTankValues(data:any) {
return this.http.post(this.TankApiUrl + "...", data).pipe(
  tap(()=>{
    this.RefreshRequired.next();
  })
);

}

Subscribing to the httpPost:

 SaveTV(){
if(this.TVForm.valid){
  console.log(this.TVForm.value);
  this.service.addTankValues(this.TVForm.value).subscribe(result=>{
    this.TVFormresp=result;
    console.log(this.TVFormresp);
    this.alert = true;
    this.TVForm.reset();
  });
}else{
  console.log("form not valid");
}

I keep on getting 400 error: bad request when sending post request to my asp.net backend. "one or more validation error occurs.

Answer 1

1. Configure your http header options

import { HttpHeaders } from '@angular/common/http';

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type':  'application/json',
    Authorization: 'my-auth-token'
  })
};

2. Apps often send data to a server with a POST request when submitting a form. In the following example, the HeroesService makes an HTTP POST request when adding a hero to the database. app/heroes/heroes.service.ts (addHero)

    
/** POST: add a new hero to the database */
addHero(hero: Hero): Observable<Hero> {
  return this.http.post<Hero>(this.heroesUrl, hero, httpOptions)
    .pipe(
      catchError(this.handleError('addHero', hero))
    );
}

The HttpClient.post() method is similar to get() in that it has a type parameter, which you can use to specify that you expect the server to return data of a given type. The method takes a resource URL and two additional parameters:

Taken from https://angular.io/guide/http