dash_pydantic_form_quickstart_model_form_submit_display.py

1import dash_mantine_components as dmc
2from dash import Dash, Input, Output, State, html
3from dash_pydantic_form import ModelForm
4from pydantic import BaseModel, Field
5
6class User(BaseModel):
7    name: str = Field(description="The user's name")
8    age: int = Field(gt=0, description="The user's age")
9    email: str = Field(pattern=r".+@.+\..+", description="The user's email")
10
11app = Dash(__name__)
12
13app.layout = dmc.MantineProvider(
14    dmc.Container([
15        ModelForm(User, id="user-form", aio_id="user"),
16        dmc.Button("Submit", id="submit-button", mt="md"),
17        html.Div(id="output", style={"marginTop": "20px"})
18    ])
19)
20
21@app.callback(
22    Output("output", "children"),
23    Input("submit-button", "n_clicks"),
24    State(ModelForm.ids.main("user-form", "user"), "data"),
25    prevent_initial_call=True,
26)
27def display_output(n_clicks, form_data):
28    if form_data:
29        # form_data is a dict that matches the Pydantic model
30        user = User(**form_data)
31        return f"Submitted: {user.json()}"
32    return "No data submitted"
33
34if __name__ == "__main__":
35    app.run_server(debug=True)