components/antd/form/demos/form_action.py

import gradio as gr
import modelscope_studio.components.antd as antd
import modelscope_studio.components.base as ms


def on_submit(_form):
    print(_form)  # the Form Component will automatically collect the form data


def bind_action_event(action):

    def on_action():
        return gr.update(form_action=action)

    return on_action


with gr.Blocks() as demo:
    with ms.Application():
        with antd.ConfigProvider():
            with antd.Card(title="Out of the Form"):
                submit_btn = antd.Button("Submit", type="primary")
                reset_btn = antd.Button("Reset")
                validate_btn = antd.Button("Validate")

            with antd.Form(label_col=dict(span=8),
                           wrapper_col=dict(span=16)) as form:
                with antd.Form.Item(
                        form_name="username",
                        label="Username",
                        rules=[{
                            "required": True,
                            "message": 'Please input your username!'
                        }, {
                            "pattern":
                            "^[a-zA-Z0-9]+$",
                            "message":
                            "Username can only contain letters and numbers!"
                        }, {
                            "min":
                            6,
                            "message":
                            "Username must be at least 6 characters long!"
                        }, {
                            "max":
                            20,
                            "message":
                            "Username must be at most 20 characters long!"
                        }]):
                    antd.Input()
                with antd.Form.Item(
                        form_name="password",
                        label="Password",
                        rules=[
                            {
                                "required": True,
                                "message": 'Please input your password!'
                            },
                            {
                                # custom validator with javascript function
                                "validator":
                                """(rule, value, cb) => {
                                    if (value !== '123') {
                                      cb('Password must be "123"')
                                    }
                                    cb()
                                }"""
                            }
                        ]):
                    antd.Input.Password()

                with antd.Form.Item(wrapper_col=dict(offset=8, span=16)):
                    antd.Button("Submit", type="primary", html_type="submit")
            form.finish(on_submit, inputs=[form])
            submit_btn.click(bind_action_event("submit"), outputs=[form])
            reset_btn.click(bind_action_event("reset"), outputs=[form])
            validate_btn.click(bind_action_event("validate"), outputs=[form])

if __name__ == "__main__":
    demo.queue().launch()