0

i'm relatively new to react and redux. I have a single container renders a single component which renders multiple pages and each page renders multiple redux-forms. Getting to the point, i have two forms on the same page. but since i'm using a single container, it is registered as a common form-name in redux. i've handled add and edit but couldn't validate forms. if i tried to validate one the other form throws validation error(required). i use, reactjs atomic design(arc) redux-form

for the sake of solving, some code samples would be..

//container

const FormContainer = reduxForm({
  form: 'CompanySettingsForm',
  onSubmit,
  onChange,
  destroyOnUnmount: true,
  enableReinitialize: true,
  destroyOnUnregister: true,
})(CompanySettingsContainer)

export default connect(mapStateToProps, mapDispatchToProps) 
(FormContainer)

//component(diffrent forms for add and edit due to some unfortunate 
design layout)

//edit
<Form onSubmit={handleSubmit}>
 // more fields..
 <Field
  name="department_category"
  component={ReduxField}
  label="Department category name"
  placeholder="Enter department category name"
  validate={[required, min3Chars]}
 />
 <Button type="submit">Submit</Button>
</Form>

//add
<Form onSubmit={handleSubmit}>
 <Field
  name="comp.department_category"
  component={ReduxField}
  label="Department category name"
  placeholder="Enter department category name"
  validate={[required, min3Chars]}
 />
 <Button type="submit">Submit</Button>
</Form>

we follow a this kind of pattern, but you get the idea..

these two forms are embedded on the same page, however, to avoid conflicts i've named the fields unique like so and destructure from the onSubmit.

if (data.comp) Object.assign(submitData, data.comp)

i understand this is not the right or least the clever way, but can't spend much time since the delivery is crucial. It'd be helpful if anyone can provide how to use unique form name in this context(single container is mandatory) and how to use the pattern formKey-^6-version for react properly. please provide complete code samples in your own pattern, i'll convert to mine.(i'm hoping for a pattern that'd enable me to use same fieldnames in each form, but that's not necessary). the problem is

1.using the same field name: redux recognises it as same and typing one field causes change on the other(as you know, it's the basic behaviour)

2.in my redux dev-tool, all the fields in the page are registered irrespective of the diffrent forms(reasonable since i'm using the same form-name). but submitting is restricted to one form, so don't have to bother.

thanks in advance..

pope_maverick
  • 902
  • 8
  • 15

1 Answers1

0

Maybe you can use this kind of architecture for your redux store:

{
         'form-key-edit': {
              'field-a': 'value-a-edit',
              'field-b': 'value-b-edit'
         },
         'form-key-add': {
             'field-a': 'value-a-add',
             'field-b': 'value-b-add'
         }
}

and onSubmit(form-key) and onChange(form-key, field)

antho39
  • 80
  • 5