How to access "pristine", "submitting" and "form.reset" outside the form in react-final-form?

Question

I would like to show above the form: "You have unsaved changes" (when the form is not pristine) with "Save" (submit) and "Discard" (reset) buttons.

How can I access things like "pristine", "submitting" and "form.reset" outside the form?

I could only find an example with external submit (https://final-form.org/docs/react-final-form/examples#external-submit) but these things doesn't seem to follow same patterns.

Ushaushant

Answer 1

I wrapped my entire component in <Form> element. Seems to be the cleanest solution.

Ushaushant

Answer 2

In case you are in a situation where you are not able to encapsulate everything within the <Form> tag, you could extract the form instance out of the form using MutableRefs.

This form instance can then be used to access form state, change field values and much more. To know more about the capabilities of form instance - React Final Form - Form API

Instructions on how to extract the form instance - Access react-final-form values from outside the form

Hominid

Answer 3

Final Form Submit Listener

Try this solution and tell me what

const submitListener = createDecorator({
    beforeSubmit: formApi => { 
        alert("go");
        formApi.reset();
    },
    afterSubmitSucceeded: formApi => {  alert("ok") },
    afterSubmitFailed: formApi => {  alert("ko") },
})

Jaguar