Fill the gap for unified mode to handle complex structure like separated mode

Hi there!

Sorry for the long issue, but it’s the only way I can explain what I’m trying to do. 😄

I’m trying to create a component that looks like this:

I’ve chosen to use the “unified” fields definition, because it seems to make more sense for large forms that have a lot of values versus keeping them separated. Here’s what the definition looks like for the field.

  {
    name: 'sending_ips',
    label: 'Sending IPs',
    rules: 'required',
    value: [],
  },

Based on what I’ve seen in the documentation, this is correct? If I look at the Form dev tools, it properly has captured the values as an array:

I’ve created a component that I use to render the fields and Add/Remove them as needed. I simply pass in the field prop like so:

<InputMultiple
  field={form.$('sending_ips')}
  inlineLabel
/>

And the component itself:

const InputMultiple = ({ field }) => {
  return (
    <Box>
      <Label field={field} inlineLabel>
        {field.map((f) => {
          return f && (
            <Box className="pt-input-group" mb={1} key={f.id}>
              <Input field={f} key={f.key} showLabel={false} />
              <Button
                className="pt-minimal"
                intent={Intent.DANGER}
                onClick={f.onDel}
                iconName="cross"
              />
            </Box>
          );
        })}
        <Button iconName="plus" onClick={field.onAdd} text="Add Value" />
        <ErrorBlock field={field} />
      </Label>
    </Box>
  );
};

export default observer(InputMultiple);

I’ve copied some of this code from your demo-examples (which are great, btw). The issue I’m having is that:

• {field.onAdd} does not do anything. The removal of individual fields works as expected inside of the map.
• The validation rules are not applied to the individual fields
• If I change the field definitions to use the “separate” style - and use sending_ips[], the field.onAdd works correctly.

Am I missing something, or is it not possible to achieve this with the unified field definition style? I’ve read over the FAQs and I’m not sure my question has been answered. I believe my issue is similar to https://github.com/foxhound87/mobx-react-form/issues/186, except I’m just trying to create multiple standard input fields to render the values into.

Thanks again!

[foxhound87]

HI @mwarger

Right now the big issue is that with the unified mode you cannot specify deep nested fields, for example, if I have an array of objects. But I will figure it out!

[sangallimarco]

I’m using the unified props and converting it in to a separate props using something like:

class FormService {

//.....

  normalise(
    data,
    struct = { fields: [], labels: {}, extra: {}, rules: {} },
    prevName = ""
  ) {
    data.forEach(fieldDef => {
      const { name, label, extra, rules } = fieldDef;
      const key = this.getName(name, prevName);

      struct.fields.push(key);

      if (fieldDef.fields) {
        this.normalise(
          fieldDef.fields,
          struct,
          this.calculateName(name, prevName)
        );
      } else {
        struct.extra[key] = extra;
        struct.labels[key] = label;
        struct.rules[key] = rules;
      }
    });

    return struct;
  }

  getName(name, prevName) {
    return `${prevName}${name}`;
  }

  calculateName(name, prevName) {
    return `${prevName}${name}[].`;
  }

//...

}

export const formService = new FormService();

The result can be passed to the form:

const normalised = formService.normalise(unifiedProps);
// ...
const form = new Form({ ...normalised, values }, { plugins, hooks });