CODEWITHSUNDEEP
reactjsredux-form
jigs_
jigs_

Reputation: 286

How to handle multiple forms in react

enter image description here

I have an accordion which has 7 steps. first 6 steps has Next button and last step has Process button. and above accordion there is a Save button.

Also one can jump to any accordion step any time.

Save button saves all step's forms data and checks validation. Every step's Next button saves that particular form data and checks validation. Process button also submits all step's forms data and checks validation.

I have tried redux-form. but it is limited to particular step. what about save button click?

Sandbox example

Upvotes: 0

Views: 4046

Answers (1)

Igor Alemasow
Igor Alemasow

Reputation: 4889

You can use getFormNames, getFormValues and isValid selectors to select your forms state.

const mapStateToProps = state => {
  return {
    forms: getFormNames()(state).map(formName => ({
      formName,
      isValid: isValid(formName)(state),
      values: getFormValues(formName)(state),
      errors: getFormSyncErrors(formName)(state)
    }))
  };
};

Submit function:

submit() {
    const { dispatch, forms } = this.props;

    forms.forEach(({ formName, isValid, values, errors }) => {
      if (isValid) {
        console.log(values);
      } else {
        dispatch(touch(formName, ...Object.keys(errors)));
      }
    });
  }

Updated example

Upvotes: 2

Related Questions