Getting form details through angular frontend

[AshishGusain17]

My angular side code is:

<form aria-labelledby="title"  ngNoForm  [action]="url" method="POST">
        <input type="text" name="email" value="" nbInput fullWidth placeholder="Email Address" >
        <input type="text" name="password" value="" nbInput fullWidth placeholder="Password" >
        <button nbButton fullWidth status="primary" class="mbt" (click)="login()">Login</button >
</form>

The url will be directed to "http://127.0.0.1:8000/getLogin"

Now, I want to fetch details in the fastapi route, but I am unable to fetch. Can anyone answer? I tried below code:

from fastapi import FastAPI
app = FastAPI()

class userForm(BaseModel):
    email: str = Form(...)
    password: str = Form(...)

@app.post('/getLogin' )
def getLogin(request: Request,userForm: userForm ):
    email = userForm.email
    password = userForm.password
    print(email,password)
    return json.dumps({"reaction":12})

You can see I am getting password and email below but how to get that in my code.

[ArcLightSlavik]

You currently have it setup so the data needs to be in the body as json

If you go to http://127.0.0.1:8000/docs you should be able to see the api and try it out

I have it working using postman and it looks like:

[AshishGusain17]

Yes, there I am able to get data, but how to get in the code?

[ArcLightSlavik]

Not sure what you mean

If sending via postman body returns {"reaction": 12} then doing print(userForm.password) should print to console

If the postman example works but angular doesn't you need to look how the angular request looks and if it sends the data in the body or the header (or if it sends any data at all)

[AshishGusain17]

Not sure what you mean

If sending via postman body returns {"reaction": 12} then doing print(userForm.password) should print to console

If the postman example works but angular doesn't you need to look how the angular request looks and if it sends the data in the body or the header (or if it sends any data at all)

Actually , I have written the above code which works normally, but isnt working with angular

[MacMacky]

@ArcLightSlavik

I believe you are not sending JSON data to your API

[AshishGusain17]

@ArcLightSlavik

I believe you are not sending JSON data to your API

it's a form, you will get the details in the post request anyway

[MacMacky]

@AshishGusain17 I replicated your issue. If you don't specify an enctype in a form it will have a default value of application/x-www-form-urlencoded

[AshishGusain17]

@MacMacky @ArcLightSlavik Hey, I solved that. This one is a new issue. I have thus far created access_token for each user loggingIn. Now, what can be done for creating sessions for each user to store more data?? Below code created access_token for user loggedIn

@app.post("/login_basic")
async def login_basic(request:Request, username: str = Form(...), password: str = Form(...) ):
        access_token_expires = timedelta(minutes=ACCESS_TOKEN_EXPIRE_MINUTES)
        access_token = create_access_token(
            data={"sub": username}, expires_delta=access_token_expires
        )
        token = jsonable_encoder(access_token)
        response = RedirectResponse(url="/loggedIn")
        response.set_cookie(
            "Authorization",
            value=f"Bearer {token}",
            httponly=True,
            max_age=1800
        )
        return response

[tiangolo]

Thanks for the help here @ArcLightSlavik and @MacMacky ! ☕

And thanks for coming back to close the issue @AshishGusain17 🍰