Question: Embedding a 'react jsonschema' form inside another form

I’ve been going over the docs and so far haven’t seen an obvious answer here, so I would like to just ask: How do you embed this <Form> into a normal <form> and override simple things like the ‘Submit’ button?

Obviously you can create a CustomForm like in the docs, but the submit button still comes along for the ride.

It would be great to have a way to break down the JSON schema into its component parts rather than having it try to handle everything

i.e.

const JsonEditorDemo = () => {
    const schemaForm = useJsonSchema({ schema, formData });

    return <form onSubmit={e => ...schemaForm.data }>
        ... your other custom form fields can go here, or you can use Formik, etc..
        <schemaForm.Editor />
        <button>submit</button>
    </form>
};

[epicfaace]

You can override the submit button by passing something as a child to the <Form> component.

Interesting idea you bring up – but how do you think it would handle things like validation errors? For example, how would we display validation errors if we had formik embedded within rjsf?

[rlamorea]

Trying to do this as well (with Formik). I think it would be nice to just have the code to validate/retrieve the values out of the form programmatically without doing a submit. Then if my primary form is submitted, I can just programmatically call the JSON form to validate/capture the formData and deal with it as I like.

FWIW: I was not able to get programmatic submit to work at all (using MUI JSON form and Formik).