Field with Array of objects (Unified Mode)

[bvallant]

I'm having a field tags which is supposed to be an array of objects. Using react-select with multi I'm able to add tag objects (with an id and a name) to the array (Note that that id and name are not editable, you can just add/remove objects).

Starting with an empty array this works flawlessly, but when initializing the form with an object which has already some tags the field's value always returns the inital array. I did a little bit of debugging and discovered that when I start with an emtpy array field.hasNestedFields is false while when starting with a pre-populated one it changes to true.

export const fields = [
  //... some other fields...
  {
    name: 'tags',
    label: 'Tags',
    value: []
  }
]

// .....
const form = new EditForm({fields}, {plugins});

//... load some item
form.update(item);

// the field component
class TagInput extends React.Component {
  render() {
    return (		
                <Select.AsyncCreatable
		    {...field.bind()}
		    multi
		    valueKey="id"
		    labelKey="name"
		    resetValue={[]}
		    searchable={true}
		    clearable={true}
		    loadOptions={this.getTags}
		/>
    )
  }
}

[foxhound87]

You get hasNestedFields: false when definining the fields value because if the prop value is an object it is treated just as the field value, and not values for nested fields (which are not defined as strcuture into the definition because you are using the Unified Mode). Differently is the use of the update method which its purpose is to recreate a nested fields tree providing an object in input (where each key is a field key).

[foxhound87]

Anyway consider to use add() instead of update() to deal with arrays:

    this.$('tags').add({
      id: 'x',
      name: 'y',
    });

or use the Separated Mode which supports complex arrays structures.

[foxhound87]

related to #197

[bvallant]

So I tried to switch to Seperated Mode:

const fields = ['tags', 'tags[]', 'tags[].id', 'tags[].name']

But this doesnt work for me at all (and hasNestedFields being always true now). Anything else to consider?

Besides thanks for your help and I think that this is still a very useful library though the documentation on these modes could be a bit better (it's pretty hard to find out why they exist in the first place and when to use which...).

[foxhound87]

Can you post the whole code of the form using the separated mode?

[bvallant]

I've created a Gist with the relevant code. Note that loading data works as expected and gets displayed the right way but modifying it isnt working. I'm wondering why the Mulitselect in the Company Simple example works flawlessly though...

[foxhound87]

The gist seems ok, the issue could be in the onChange event handler, the default one cannot be enough so you should provide a custom one to manipulate the data edited by the react-select component.

[foxhound87]

Did you see this example for the custom onChange?

https://github.com/foxhound87/mobx-react-form-demo/blob/master/src/components/forms/FormDynamicFieldsSelect.jsx#L10

[bvallant]

Thanks for your help again, after some poking around I came up with this onChange handler:

handleChange(e) {
  const {field} = this.props
  // clear all "old" values 
  // field.clear() / .reset() didnt work for me 
  // so clearing the mobx array myself
  field.fields.clear()

   // add the currently selected values
   e.map(v => field.add(v));
}

This basically works now for me, thanks for poinint me to the onChange thing.

[foxhound87]

I've updated the package introducing the struct prop.

Take a look here: https://github.com/foxhound87/mobx-react-form/blob/master/tests/data/forms/fixes/form.q1.js