title: Failed to load resource: the server responded with a status of 400 () error: Angular asp.net core 5 api
body: <p>I am developing an application with Angular 12 in the frontend and ASP.net core 5 in API. When calling HttpPost API I get an error <em><strong>Failed to load resource: the server responded with a status of 400 ()</strong></em></p>
  <p>If I use string or integer parameters there is no issue and API is called properly. But only when I am passing values with entity class, I get this error.</p>
  <p>Here is my entity class in asp.net core</p>
  <pre><code>public class FrontEnd
  { 
    public class SendOTPReq
      {
          public string MobileNo { get; set; }
          public string Email { get; set; }
          public int Type { get; set; }
      }
  }
  </code></pre>
  <p>And here is the API</p>
  <pre><code>    [Route(&quot;SendOTP&quot;)]
      [HttpPost]
      public async Task&lt;object&gt; SendOTP(SendOTPReq otpReq)
      {
          try
          {
              CommonApiResponse commonResponse = new CommonApiResponse();
  
              if (!ModelState.IsValid)
              {
                  return new APIResponse(406, &quot;&quot;, ModelState.Select(t =&gt; new { t.Key, t.Value.Errors[0].ErrorMessage }));
              }
              var Result = await _IFrontEndRepository.SendOTP(otpReq);
              if (Result != null)
              {
                  commonResponse.Status = &quot;Success&quot;;
                  commonResponse.ErrorMsg = &quot;&quot;;
                  commonResponse.ResultData = Result;
                  return new APIResponse(200, &quot;Request Success&quot;, commonResponse);
              }
              else
              {
                  commonResponse.Status = &quot;Failed&quot;;
                  commonResponse.ErrorMsg = Result.Message;
                  commonResponse.ResultData = Result;
                  return new APIResponse(204, &quot;Request Failed&quot;, commonResponse);
              }
          }
          catch (Exception e)
          {
  
              throw new Exception(e.Message);
          }
  
      }
  </code></pre>
  <p>Here is my angular component.ts code:</p>
  <pre><code>const otpReq = new SendOTPReq();
  
  otpReq.MobileNo = this.registerForm.controls['phoneNo'].value;
  otpReq.Email = this.registerForm.controls['email'].value;
  otpReq.Type = 2; //2 is or email and 1 is for sms
  
  this.accountsService.sendOTP(otpReq).subscribe(      
    (data) =&gt; {
           //do stuff here
      
           });
  </code></pre>
  <p>Angular service method:</p>
  <pre><code>export class AccountsService {
  
  constructor(private httpClient: HttpClient,
  private _router: Router) { }
  
   sendOTP(otpReq: SendOTPReq): Observable&lt;SendOTPReq&gt; {
    debugger;
    return this.httpClient.post&lt;SendOTPReq&gt;(environment.ApiUrl + 'FrontEnd/SendOTP', otpReq)
      .pipe(
        catchError(this.errorHandler),
      );
  }
  
  
  errorHandler(error: { error: { message: string; }; status: undefined; message: any; }) {
    debugger;
    let errorMessage = '';
    if (error.error instanceof ErrorEvent) {
      // Get client-side error
      errorMessage = error.error.message;
    } else {
      // Get server-side error
      if(error.status == undefined)
      {
        errorMessage = &quot;The server connection with the application is showing error. Close the application and restart again.&quot;
      }else{
      errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;
      }
    }      
    return throwError(errorMessage);
  }
  </code></pre>
  <p>}</p>
  <p>Angular model class:</p>
  <pre><code>export class SendOTPReq
  {
    MobileNo!:string;
    Email!: string;
    Type!: number;
  }
  </code></pre>
  <p>What could be going wrong?</p>