score:14

Accepted answer

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);

score:0

i had to tackle this issue recently. i ended up passing a callback to the form, which is invoked every time the properties i'm interested in change. i use the componentdidupdate life cycle method to detect changes.

this should work on any version of the library.

here is a post with sample code - http://nikgrozev.com/2018/06/08/redux-form-with-external-submit-button/

score:1

if we are talking about just submitting the form, then you should provide {withref: true} option to your redux connect() function.

consider row component that has child rowdetail component which has information that should be saved from row.

rowdetail in this case could be created like this:

import { connect } from 'react-redux';
import { reduxform } from 'redux-form';

const rowdetailform = reduxform({form: 'row-detail-form'})(rowdetail);

export default connect(mapstatetoprops, null, null, {withref: true})(rowdetailform);

then, in your parent component (row) you create your form with ref attribute:

<rowdetailform ref={'rowdetailform'} .../>  

submitting now is 'easy':

onsave() {
  this.refs.rowdetailform.getwrappedinstance().submit();
}

if we are talking about pristine and other form properties, then you could try to get them from your mapstatetoprops function in your parent component.

const rowdetailformname = 'row-detail-form';
const mapstatetoprops = (state) => ({
  rowdetailform: state.form[rowdetailformname]
});

but this way seems a bit hacky because as i understand redux-form api all form states were never meant to be accessed directly. please correct me if i am wrong

score:2

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).

score:2

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/

score: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/

score:4

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.


Related Query

More Query from same tag