Sveltekit reactive Forms

Question

quick question. I'm kinda new to SvelteKit and i have a form that looks the following way:

I have two input fields, one is for the userType (select) and another one is called action (select). the usertypes and actions come from the +page.server.ts as PageData. Now, if the userType gets changed from regular to admin, the actions in the input action change too. In Angular i remember, using ngrx, the Store was refetching the api and then updating the selectable options (observable). how would i achieve this in sveltekit?

should i write my own abstraction in reactive svelte statements e.g $: fetch('actions/?=userType=${$userType}').then(res=>$actions.set(res))? or what is the correct way?

Romain Durand · Accepted Answer · 2024-01-16 22:21:07Z

0

You trigger a function that does your api call by binding it to the on:change or on:blur event of your userType select

here's an example : https://svelte.dev/repl/3fe6d1ddd7944919b29406ee17f9a715?version=3.23.1

answered Jan 16, 2024 at 22:21

Romain Durand

8211 gold badge9 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

brunnerh · Accepted Answer · 2024-01-17 01:17:58Z

There isn't really a standard mechanism for this. I would question whether the asynchrony is actually necessary, though. It causes complexity that can potentially be avoided by just sending a complete mapping from your types to actions. Then you can set the actions as easily as e.g.:

$: actions = data.actionMap[userType];

If you really need to keep the separate request, you have to make sure to not run into race conditions, which your example code will have. When the fetch completes, the type may already have changed again, possibly multiple times. A simple fix is to check on completion whether the type the request was for is still selected.

yeah thought about this too, atm i do not know the amount of data that will be requested / handled. If its just regular amount of information, this is probably the best solution. but i have experienced a couple projects (angular) from others where loading the data took so much time, the had to re-fetch new data with new parameters.

Collectives™ on Stack Overflow

Sveltekit reactive Forms

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related