CODEWITHSUNDEEP
reactjsreact-reduxredux-form
Alex
Alex

Reputation: 2053

How to add and remove fields with redux-form

I have a large form with the fields being drawn out dynamically, based on a schema. (i'm looping through a JSON schema to write my fields).

Some of my fields are nested, so the naming convention follows a dot-notation;

ParentField.ChildField.Name

This will automatically nest the data as it's input;

ParentField {
  ChildField {
    Name: "Value of field"
  }
}

redux-form provides a FieldArray that allows you to push() fields on demand, but this changes the format of the data to include arrays of info - not what i want!

So i need to be able to register and unregister fields on demand (button click for example)

The documents point to actionCreators but i can't figure out how to implement them.

Upvotes: 2

Views: 8664

Answers (1)

Dario
Dario

Reputation: 6280

You can use registerField and unregisterField action creators.

Just import them in your file

import { registerField, unregisterField } from 'redux-form';

and then in your code dispatch the action simply:

this.props.dispatch(registerField(yourFormName, yourFieldName, fieldType));

(fieldType being either string 'Field' or 'FieldArray') and

this.props.dispatch(unregisterField(yourFormName, yourFieldName));

Upvotes: 10

Related Questions