Render multiple independant redux-form inside parent-form

I would like to render multiple redux-forms inside parent form which will be responsible on submitting the form,

So for example i have:

• Parent form – first form – second form

the three above forms are redux-forms, the first and second forms are independent and work perfectly alone, However if tried to render the first and second forms inside the parent form

I got the following:

What i expect to see is all fields of the first and the second forms are merged into the parent form, and the parent form will be responsible on submitting the form when all fields are filled,

I tried to solve this problem by passing the props of parent form to the first and second form, and this what i got !!

Wow, That’s what i want!!, but here i have a small issue! when onBlur occur on any field an asyncValidate function passed to reduxForm must return a promise exception is thrown although i’m not used asyncValidation anywhere in my App!!

Here’s my code:

`class ParentForm extends React.Component { render(){ let props=this.props; console.log(props); const {handleSubmit,handleSubmit2 ,afterSubmit,handleSubmitCallBack,signupHandler, pristine, reset, submitting } = props return ( <form onSubmit={handleSubmit(handleSubmit2)} > <div className="forms-wrapper"> <div> <Row> <Col md={6} >

                <FirstForm
                  {...props}
                  hasParent={true}
                  />
              </Col>
            </Row>
          </div>
          <div>
            <div>
              <SecondForm hasParent={true} {...props} />
            </div>
          </div>
          <button type="submit" disabled={submitting} onClick={handleSubmit(handleSubmit2)}        >Submit</button>
        </div>
      </form>
        )

} } ` Any help plZ!!

[erikras]

Form nesting, whilst discussed as a possible future feature, is not currently supported.

Why not abstract away just the fields of the sub-forms into a <FormSection/>? Then, if they need to be used separately (not inside the ParentForm), they could be individually decorated with reduxForm(), and they can also exist inside the ParentForm.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.