Submit button from outside Redux Form v6.0.0

Question

This question relates to Redux Form v6.0.0 (in time of writing this question it is v6.0.0-alpha.15).

How can I get form validation status (like pristine, submitting, invalid) from outside of form component ?

Let me give an example. This is "classical redux-form" pseudo-structure:

<Form(MyExampleForm)>
    <MyExampleForm>
        <input name="title" ... />
        <submit-button />

...where <submit-button> in JSX looks like this:

<button type="submit" disabled={pristine || submitting || invalid} >Save</button>

But in my application, my submit button must be outside of the form, placed on different place in the application (let's say in application header, on the top of whole application).

1. How can I get those pristine, submitting, invalid from outside of Redux-Form? (Without really nasty hacking, if possible :-))
2. How can I submit that form?

Answer 1

Just decorate another component with same form name and you have access to same state variables there. Also you can pass it onSubmit function from parent and be able to submit all the Field values from wherever you define them as they are all from redux state, not HTML of current form instance. (it is kind of "hacky" way, but it feels right)

The submit function is defined from parent, not shared in state, so you can have it different for every instance.

class MySubmitForm extends React.Component {
    render() {
        return (
            <button
                onClick={this.props.handleSubmit}
            >
                {this.props.pristine ? 'pristine' : 'changed'}
            </button>
        )
    }
}

export default reduxForm({
    form: 'myFormName'
})(MySubmitForm);

Answer 2

redux-form works with React Redux to enable an html form in React to use Redux to store all of its state.

If "outside of Redux-Form" means still redux application, you can try to store those properties in state by dispatching some actions.

In forms: you're detecting whats happening (when its invalid etc), dispatch an action to modify a state, In "outside" part: you're passing a proper property to component (with those you need) and depends on that you disable a button.

Answer 3

in latest redux-form version 6.0.2:

1. it is possible to access form state pristine, submitting, invalid via selectors http://redux-form.com/6.0.2/docs/api/Selectors.md/

2. it is possible to export redux-form action creators http://redux-form.com/6.0.2/docs/api/ActionCreators.md/

Answer 4

Maybe you can have a look at the Instance API of redux-forms. It provides access to a submit() method on an instance of your decorated form component. There is also a pristine Boolean property and an invalid Boolean property available (there is a request to expose the submitting property too).

There is an example here : http://redux-form.com/5.3.1/#/examples/submit-from-parent?_k=jgv0m4 (example is for 5.3.1, but the process is similar with v6 using the Instance API)

The basic idea is that by adding a ref="myExampleForm" to your form, you can pass it around with this.refs.myExampleForm. You can then check properties of the instance or call the submit() method (or any other method exposed).

Answer 5

Now is easier to do this. You can call the Submit action in the standalone component that has the button.

See this example: https://redux-form.com/7.1.2/examples/remotesubmit/