svecosystem/formsnap

How to update form field values outside of `<Form.Root>`?

pheuter opened this issue · 7 comments

I have some client-side logic that executes within an onMount and I would like to update some Formsnap field values from there, but there currently doesn't seem to be any way to do that. Am I missing some bind: attributes or an API that would expose the underlying form/field store outside of <Form.Root> so that I can access and update the values outside of the immediate form dom?

n00ki commented

https://www.formsnap.dev/docs/api-reference/form-field
look for the form field value slot prop.
is that what you're looking for?

Possibly, if it's in fact possible to bind to that form field value in a way where it can be accessed and modified outside of the form. Do you have a code example?

Hey @pheuter, I've been exploring some different ways to make this a bit cleaner, the current way to accomplish this is a bit hacky and I wish it wasn't. But using the setValue returned from getFormField() from a component within a form field is likely the best way to accomplish this at this moment!

I have some client-side logic that executes within an onMount and I would like to update some Formsnap field values from there, but there currently doesn't seem to be any way to do that. Am I missing some bind: attributes or an API that would expose the underlying form/field store outside of <Form.Root> so that I can access and update the values outside of the immediate form dom?

Would you be able to provide some code / a minimal repro of what you're trying to accomplish specifically so I can ensure I'm working on a solution to the right problem?

Is this onMount inside of the root +page or the component where the <Form.Root> lives, or is this within a field or elsewhere? I have a few ideas for how this can be accomplished, but want to ensure I understand the scope!

Is this onMount inside of the root +page or the component where the <Form.Root> lives

Yes, it's within the same component that renders the <Form.Root>. It's a SvelteKit +page component that, inside an onMount(), fetches the browser's geolocation and needs to populate latitude and longitude on the Form.Root form.

Got it, thanks! Messing with some ideas now @pheuter!

@huntabyte Another common use case is when we have a <Form.Root> inside of a shadcn Dialog, for something like executing a form action for a particular row in a table, and it's often the case where we need to set/update the form with a particular row value, which exists outside of the form.