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 with receiving the prams in the backend FastAPI no seeing the prams
and raise 422 (Unprocessable Entity)

• 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 …