How to call POST API using body prams in angular [ raise 422 error (Unprocessable Entity)]

I'm struggling to use Post API using FastAPI , Angular while using HttpClient.post function. The issue is with receiving the params in the backend FastAPI–not seeing the params and 422 (Unprocessable Entity) is raised.

• Mybackend API CODE (FastAPI-Python):

from typing import Optional
from pydantic import BaseModel
class UsersLoginRequest(BaseModel):
    username: str
    password: str


@users_router.post("/login")
def login(body: UsersLoginRequest):
    pass

• Start backend:

Uvicorn running on http: //127.0.0.1:3101 (Press CTRL+C to quit)
Started reloader process [36366] using WatchFiles
Started server process 363701
Waiting for application startup.
Application startup complete

• Call API using Postman cURL example:

curl --location --request POST 'http://127.0.0.1:3101/users/login' \
--header 'Content-Type: application/json' \
--header 'Accept: application/json' \
--data-raw '{
    "username": "admin",
    "password": "admin"
}'

# See trafic ... 

127.0.0.1:54336 - "POST /users/login HTTP/1.1" 200 OK

try same API using angular frontend by calling this.http.post :

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

 constructor( private http:HttpClient )

signIn(): void
    { 
        const headers = new HttpHeaders();
        headers.append('Content-Type', 'application/json');
 
        let params = new HttpParams()
        .append('username', "admin")
        .append('password', "admin")
 
          debugger
        this.http.post('http://127.0.0.1:3101/users/login',params   ,{ headers: headers }
        ).subscribe({ 
        error: (respose:any) => { 
            debugger
         },    // errorHandler 
        next: (respose:any) => {  
            debugger
        },     // nextHandler 
    })
 
}
 

backend trafic :

INFO:     127.0.0.1:62969 - "POST /users/login HTTP/1.1" 422 Unprocessable Entity

try to change parameter place

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

 constructor(
        private http:HttpClient
    )

signIn(): void
    {

        const headers = new HttpHeaders();
        headers.append('Content-Type', 'application/json');

        
        let params = new HttpParams()
        .append('username', "admin")
        .append('password', "admin")
 
          debugger
        this.http.post('http://127.0.0.1:3101/users/login',null   ,{ headers: headers, params: params }
        ).subscribe({ 
        error: (respose:any) => { 
            debugger
         },    // errorHandler 
        next: (respose:any) => {  
            debugger
        },     // nextHandler 
    })
 
}
 

backend trafic :

INFO:     127.0.0.1:62969 - "POST /users/login HTTP/1.1" 422 Unprocessable Entity

**I DON'T KNOW WHAT I MISSING !!!!**

I'm trying to receive body prams in python - FastAPI

for the record ::

I did try this slotion it didnt work

Error in Angular with HTTPparams 422 (Unprocessable Entity) and FastAPI

you can see the example above ...

Try to send the object instead of http params. For example:

    this.http.post('http://127.0.0.1:3101/users/login',{user: "foo", password: "bar"},{ headers: headers })

It could be you are sending an http form?