fabian-hiller / modular-forms

The modular and type-safe form library for SolidJS, Qwik and Preact
https://modularforms.dev
MIT License
1.05k stars 55 forks source link

Access FieldArray Items ( not just index ) #243

Open robodna opened 2 months ago

robodna commented 2 months ago

I'm using FieldArray. Is there a way to pass the array of items contained the in the field array, and not just the fieldArray.items array which is just a random number index?

I would like to pass them like <MyCustomComponent items={FieldArray.arrayItems}

MyCustomComponent uses a <For to display the FieldArray.arrayItems[].name object property in a single textarea type input box. ( not as single <option tags for example )

fabian-hiller commented 2 months ago

Have you read the field arrays guide? I recommend using <Field /> inside of <FieldArray /> and as a fallback you can call getValues(formStore, 'field_array_name').

robodna commented 2 months ago

I did read the guide and see how I can use <Field inside FieldArray, but that creates 1 element for each item. What would I pass to the element contained inside <Field? field.value would be just 1 value, and fieldArray.items is just a random number index. Perhaps I need to pass children elements to <MyCustomComponent instead of passing them via MyCustomComponent items={fieldArray.arrayItems} if that existed.

So instead of `

` I would do ` `
fabian-hiller commented 2 months ago

The idea of Modular Forms is that every input is represented by an <input />, <select /> or <textarea /> element. That's why every input should should use it's own <Field /> to connect to the form store. You can also wrap two <Field /> components in each other to connect two inputs via a single component.

You can also break out of Modular Forms default pattern with methods like setValue, getValue and getValues but is is only recommended in special cases.

robodna commented 2 months ago

I was able to get this working by re-organizing my form and inputs.