title: Can't get 400 Bad request properly
body: <p>I'm trying to handling errors with user authentication, and when user register new account but the username already exist, It should throw 400 Bad request error.</p>
  
  <p>So this is my register method in <code>AuthController.cs</code>: </p>
  
  <pre><code>public async Task&lt;IActionResult&gt;Register(UserForRegisterDto 
                                                     userForRegisterDto)
      {
      userForRegisterDto.username = userForRegisterDto.username.ToLower();
  
          if(await _repo.UserExists(userForRegisterDto.username)) 
          {
              return BadRequest("Username already exists !");
          }
  
          var userToCreate = new User
          {
              Username = userForRegisterDto.username
          };
  
       var createdUser = await _repo.Register(userToCreate, 
                                              userForRegisterDto.password);
  
          return StatusCode(201);
      }
  </code></pre>
  
  <p>in <code>register.component.ts</code>:</p>
  
  <pre><code>export class RegisterComponent implements OnInit {
  @Output() cancelRegister = new EventEmitter();
  model: any = {};
  constructor(private authService: AuthService) { }
  ngOnInit() {}
  
  register() {
      this.authService.register(this.model).subscribe(() =&gt; {
    console.log('create successed');
  }, error =&gt; {  
    console.log(error);
  });
  }
  
  cancel() {
     this.cancelRegister.emit(false);
      console.log('canceled');
   }
  }
  </code></pre>
  
  <p>in <code>register.component.html</code>:</p>
  
  <pre><code>&lt;form #registerForm="ngForm" (ngSubmit)="register()"&gt;
  &lt;h2 class="text-center text-primary"&gt;Sign Up&lt;/h2&gt;
  &lt;hr&gt;
  
  &lt;div class="form-group"&gt;
      &lt;input type="text" class="form-control" required name="username" 
      [(ngModel)]="model.username" placeholder="Username"&gt;
  &lt;/div&gt;
  
  &lt;div class="form-group"&gt;
      &lt;input type="password" class="form-control" required name="password" 
  [(ngModel)]="model.password" placeholder="Password"&gt;
  &lt;/div&gt;
  
  &lt;div class="form-group text-center"&gt;
      &lt;button class="btn btn-success" type="submit"&gt;Register&lt;/button&gt;
      &lt;button class="btn btn-default" type="button" 
      (click)="cancel()"&gt;Cancel&lt;/button&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>To send error from front-end, I created <code>Exceptions.cs</code> which will hold error in the header of the fetch API:</p>
  
  <pre><code> public static class Exceptions
  {
      public static void AddApplicationError(this HttpResponse response, 
                                              string message)
      {
          response.Headers.Add("Application-Error", message);
  
          response.Headers.Add("Access-Control-Expose-Headers", 
                                           "Application-Error");
  
          response.Headers.Add("Access-Control-Allow-Origin", "*");
      }
  }
  </code></pre>
  
  <p>To catch errors, I created error.interceptor.ts which will handle errors sent from the backend:</p>
  
  <pre><code>@Injectable()
  export class ErrorInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest&lt;any&gt;, next: HttpHandler): 
    Observable&lt;HttpEvent&lt;any&gt;&gt; {
      return next.handle(req).pipe(
          catchError(error =&gt; {
      if (error instanceof HttpErrorResponse) {
  
          const applicationError = error.headers.get('Application-Error');
                  if (applicationError) {
                      console.error(applicationError);
                      return throwError(applicationError);
                  }
       const serverError = error.error.errors; 
  
                  let modalStateErrors = '';
                  if (serverError &amp;&amp; typeof serverError === 'object' ) {
                      for (const key in serverError) {
                          if (serverError[key]) {
                              modalStateErrors += serverError[key] + `\n`;
                          }
                      }
                  }
  
      return throwError(modalStateErrors || serverError || 'Server Error');
              }
          })
      );
      }
  }
  //add this method to provider in app.module.ts to get everything work 
  export const ErrorProvider = { 
      provide: HTTP_INTERCEPTORS,
      useClass: ErrorInterceptor,
      multi: true
  };
  </code></pre>
  
  <p>The <code>serverError</code> will hold the all the exceptions and register method in register component will display errors on the console, everything is working as I expected except the 400 Bad request defined in register method in <code>AuthController</code>. Now It's return "Server Error" but what I expected is "Username already exists!"</p>
  
  <p>I'm using .net-core 2.2 and totally new to angular. I will appreciate any idea that help me to solve this problem :-)</p>