title: Handle 400 Bad Request From WebApi In Angular 6 (using HttpClient)
body: <p>Below is an Asp.net Core WebAPI which returns bad request with Error details as to its param when let's say duplicate a user is trying to register.</p>
  
  <pre><code>public async Task&lt;IActionResult&gt; Register([FromBody] RegisterModel registerModel)
      {
          if (ModelState.IsValid)
          {
              var user = new ApplicationUser
              {
                  //TODO: Use Automapper instead of manual binding  
  
                  UserName = registerModel.Username,
                  FirstName = registerModel.FirstName,
                  LastName = registerModel.LastName,
                  Email = registerModel.Email
              };
              var identityResult = await this.userManager.CreateAsync(user, registerModel.Password);
              if (identityResult.Succeeded)
              {
                  await signInManager.SignInAsync(user, isPersistent: false);
                  return Ok(GetToken(user));
              }
              else
              {
                  Console.WriteLine("Errors are : "+ identityResult.Errors);
                  return BadRequest(identityResult.Errors);
              }
          }
          return BadRequest(ModelState);
  </code></pre>
  
  <p>The response is being handled at the Angular side as follows:</p>
  
  <p><strong>user.service.ts</strong></p>
  
  <pre><code>register(user: User) {
     // let headers = new Headers({ 'Content-Type': 'application/json' });
     //var reqHeader = new HttpHeaders({ 'Content-Type': 'application/json'});
     const reqHeader = new HttpHeaders().set('Content-Type', 'application/json')
                              .set('Accept', 'application/json');
  //return this.http.post(this.rootUrl + '/api/account/register', body,{headers : reqHeader});
  
      return this.http.post(this.apiUrl+ '/api/account/register', user,{headers : reqHeader});
  }
  </code></pre>
  
  <p>above method being called out in: </p>
  
  <p><strong>register.component.ts</strong></p>
  
  <pre><code>this.userService.register(this.registerForm.value)
          .pipe(map((res: Response) =&gt; res.json()))
          .subscribe(
              data =&gt; {
                  this.alertService.success('Registration successful', true);
                  this.router.navigate(['/login']);
              },
              (error:HttpErrorResponse) =&gt; {
                  // let validationErrorDictionary = JSON.parse(error.text());
                  // for (var fieldName in validationErrorDictionary) {
                  //     if (validationErrorDictionary.hasOwnProperty(fieldName)) {
                  //         this.errors.push(validationErrorDictionary[fieldName]);
                  //     }
                  // }
                  // this.alertService.errorMsg(this.errors);
                  console.log(error.error);
              });
  </code></pre>
  
  <p>When I tried to do Postman I get perfect result as below : </p>
  
  <p>Postman Result:
  <img src="https://i.stack.imgur.com/It3u1.png" alt="Screenshot 1"></p>
  
  <p>But the same result despite trying multiple code snippet doesn't work out and all it logs 'Bad result' as a response.</p>
  
  <p>Angular Result:
  <img src="https://i.stack.imgur.com/CHQvZ.png" alt="Screenshot 2"></p>
  
  <p>I did notice though the response lies in the network tab.. just short of an idea to process it.</p>
  
  <p>Error Description:
  <img src="https://i.stack.imgur.com/q2uAh.png" alt="Screenshot 3"></p>
  
  <p><strong><em>What's missing here? your response will be much appreciated !</em></strong></p>