How to handle multiple forms in react

Question

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

Please post your code.

Colin Burke
– Colin Burke

2018-05-01 13:56:44 +00:00
Commented May 1, 2018 at 13:56 — Colin Burke
– Colin Burke, Commented May 1, 2018 at 13:56
screenshots added

jigs_
– jigs_

2018-05-02 08:02:40 +00:00
Commented May 2, 2018 at 8:02 — jigs_
– jigs_, Commented May 2, 2018 at 8:02
codesandbox.io/s/zrw3lkjrr4

jigs_
– jigs_

2018-05-02 09:37:23 +00:00
Commented May 2, 2018 at 9:37 — jigs_
– jigs_, Commented May 2, 2018 at 9:37
Please don't add screenshots, copy and paste your code.

Colin Burke
– Colin Burke

2018-05-02 10:36:42 +00:00
Commented May 2, 2018 at 10:36 — Colin Burke
– Colin Burke, Commented May 2, 2018 at 10:36

Igor Alemasow · Accepted Answer · 2018-05-02 11:32:36Z

2

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

edited May 2, 2018 at 11:32

answered May 2, 2018 at 10:05

Igor Alemasow

4,9592 gold badges32 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jigs_ Over a year ago

looks good, how can I fire validation in those forms so it will display error

Collectives™ on Stack Overflow

How to handle multiple forms in react

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related