crimson wagon
Hey all, I'm trying to use modular forms in the following fashion:
Here's my form loader:
export const useFormLoader = routeLoader$<InitialValues<DataspaceFormType>>(() => FormDefaultValues);
export const useFormAction = formAction$<any, any>(async (values) => {
console.log('values', values);
}, valiForm$(FormSchema));
Here's my reusable form component (that doesn't work):
const FieldRenderer = component$((props: { Form: any; Field: any; FieldArray: any; FormStore: any }) => {
const { Form, Field, FieldArray, FormStore } = props;
return (
<>
<Form>
{DataspaceForm.map((field, index) => {
if (isTopLevelField(field)) {
return (
<Field key={`field-${index}`} name={field.name}>
{(fieldProps: any, props: any) => <TextInput {...props} />}
</Field>
);
} else {
return (
<FieldArray key={`fieldArray-${index}`} name={field.key}>
{(fieldArray: { items: any[] }) => (
<>
{fieldArray.items.map((_, nestedIndex) => (
<Field key={`fieldItem-${nestedIndex}`} name={`${field.key}.${nestedIndex}.${field.nestedField[nestedIndex].name}`}>
{(fieldProps: any, props: any) => <TextInput {...props} />}
</Field>
))}
</>
)}
</FieldArray>
);
}
})}
<Button variant="outlined">
Create account
</Button>
</Form>
</>
);
});```And my main component:
export default component$(() => {
const [FormStore, { Form, Field, FieldArray }] = useForm({
loader: useFormLoader(),
action: useFormAction(),
validate: valiForm$(FormSchema),
fieldArrays: FormNestedKeys,
});
const values = getValues(FormStore);
return (
<FieldRenderer Field={Field} FieldArray={FieldArray} Form={Form} FormStore={FormStore} />
);
});```However, I get a qwik error saying the following, but really all I'm trying to do is modularize my form so that I can make it a dynamic mechanism under the hood. But I'm not able to get it to work.
How can I accomplish this?
I'm well aware that this wouldn't work, I'm putting this code here so that I can outline my intent and find a good way to follow qwik's paradigm.
pale needle
Hm... sounds like a good question for @lament slate if he has any insight on it
round nebula
I think there is even a dedicated https://discord.com/channels/842438759945601056/1149446197581455370 channel 🙂
crimson wagon
Sweet thanks
Should I repost this there?
lament slate
It is ok here. But for the future it might help to post or give me a hint there, because I try to check this channel every 24 hours.
I think the problem is, that you can not pass components as props. Please try to replace useForm with useFormStore and import Form and Field as needed. https://modularforms.dev/qwik/api/useFormStore