rival-black•3y ago

Multiple select for nested objects with IDs

Hi everyone. I'm trying to build a Form.Item with a Select inside for multiple related objects. My base objects look like this:

{
  "id": 1,
  "relations": [
    {
      "id": 1
    },
    {
      "id": 2
    }
  ]
}

{
  "id": 1,
  "relations": [
    {
      "id": 1
    },
    {
      "id": 2
    }
  ]
}

So I want <Form.Item> to set an array of objects, not just numbers. It works just fine for “many-to-one” relation with NamePath (name={['relation', 'id']}), but when it comes to “one-to-many” relation NamePath won't help. I was trying to play with normalize and other things, but with no luck.

7 Replies

stormy-gold•3y ago

Hi @konstantinbodnia, Can you give more detailed information about what you want to do? reporoduced code on github, stackblitz or codesandbox would be awesome 🙏

quickest-silver•3y ago

Hey @konstantinbodnia, I think i got what you're trying to achieve. 🤔 Let's start with using name="relation" instead of relation.id And we can use getValueFromEvent and getValueProps to get/set the values to the form. getValueFromEvent callback can be used to get the value from the onChange event of the Select component. So you can map the value appropriately to your form state. getValueProps can be used to pass the values to the child element (in your case <Select>) I wonder which data provider you're using? If it's a compatible one with the @pankod/refine-inferencer I think you should give it a try 🚀 Inferencer will try to resolve the data and create a code for your components. You can find a sample solution in its generated code and also it can give you a great head start 🚀

quickest-silver•3y ago

Check out the docs of Ant design here: https://ant.design/components/form#formitem

Form - Ant Design

rival-blackOP•3y ago

I'm using nestjsx/crud as a data provider these two functions did the trick

quickest-silver•3y ago

Great!

rival-blackOP•3y ago

getValueFromEvent={(values) => {
  return values.map((id: number) => ({ id }));
}}
getValueProps={(ids) => {
  return ids?.map(({ id }: { id: number }) => id);
}}

getValueFromEvent={(values) => {
  return values.map((id: number) => ({ id }));
}}
getValueProps={(ids) => {
  return ids?.map(({ id }: { id: number }) => id);
}}

But for some reason it is now very slow... Ok, thank you for your help, @aliemirs . This works.

const { selectProps: relationsSelectProps } = useSelect<Relation>({
  resource: 'relations',
  defaultValue: relationsIds,
});

<Form.Item
  name={['relations']}
  getValueFromEvent={(values) => values.map((id: number) => ({ id }))}
  getValueProps={(ids) => ids?.map(({ id }: { id: number }) => id)}
>
  <Select
    mode="multiple"
    {...relationsSelectProps}
  />
</Form.Item>

const { selectProps: relationsSelectProps } = useSelect<Relation>({
  resource: 'relations',
  defaultValue: relationsIds,
});

<Form.Item
  name={['relations']}
  getValueFromEvent={(values) => values.map((id: number) => ({ id }))}
  getValueProps={(ids) => ids?.map(({ id }: { id: number }) => id)}
>
  <Select
    mode="multiple"
    {...relationsSelectProps}
  />
</Form.Item>

But now I have one more following issue. The values won't get pre-selected in the edit form.

quickest-silver•3y ago

@konstantinbodnia can you check the relationSelectProps to see if its props are matching your getValueProps ? This might be the issue for the default values

Multiple select for nested objects with IDs

Did you find this page helpful?