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

user_7615968 0
Viewed 1103

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.

react-final-form reactjs
3 Answers

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

user_76159680

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

user_98964380

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") },
})
user_94661610
Related