Handle <select multiple>

[c00]

Currently the value of a select component with the multiple is not reflected correctly in the form.

REPL for reproduction

Inspecting the objects, I can see that the _value in the FormControl is incorrect as well. And looking at the code, it seems that a string is always expected.

Expected:

The $form.values.foo to be an array of values.

Actual:

The first value of the array is taken as the value.

[moalamri]

I was able to overcome this by cloning the repo and adding an extra value type string[];. You must change the types everywhere to suppress type mismatches. And in the validators you will have to check the value type before processing the validation. Otherwise string != string[] which will return an invalid value state.

[noahsalvi]

I was able to overcome this by cloning the repo and adding an extra value type string[];. You must change the types everywhere to suppress type mismatches. And in the validators you will have to check the value type before processing the validation. Otherwise string != string[] which will return an invalid value state.

Hmm i like this multiple feature but it raises the problem of having non string form controls. I mean it would be possible to expand values to be of type string | string[] but as moalamri already said, this would result in the user having to type check the input every time.

I'm currently not sure if this is a trade off that is worth it. Although making the value any would allow us to also return the value of a datetime-local input as a Date… 🤔

[moalamri]

I was able to overcome this by cloning the repo and adding an extra value type string[];. You must change the types everywhere to suppress type mismatches. And in the validators you will have to check the value type before processing the validation. Otherwise string != string[] which will return an invalid value state.

Hmm i like this multiple feature but it raises the problem of having non string form controls. I mean it would be possible to expand values to be of type string | string[] but as moalamri already said, this would result in the user having to type check the input every time.

I'm currently not sure if this is a trade off that is worth it. Although making the value any would allow us to also return the value of a datetime-local input as a Date… 🤔

I really faced a huge kill with dynamic data where I might need to use an object or a list of strings/numbers/objects as a value. I didn't want to make a mess to the core code so I eventually used objects as string using stringify and joined array values to be strings, then later I convert those values in the validators back to their original type and do the validation. So perhaps this could be easier way for @c00 to make the value as a joined string? It's for sure an overkill because I needed to sterilize values again before submitting the form data as well 😓

Edit: by the way I also tried to put a value of an input as an object but it seems that svelte input value is always string. I'm not absolutely sure about this, I didn't dive deep instead I used the workaround I mentioned

[noahsalvi]

In general all inputs always return a single string. As for selects wiith multiple it seems that when binding to the value in svelte, it does not take the value of the select but rather a newly added property called selectedOptions which is an array of what was selected.

Furthermore for inputs with type="date" value is still just a string "yyyy-mm-dd" but the HTML spec exposed a valueAsDate property which probably just does new Date(inputElement.value).

[noahsalvi]

17 is kind off similar to this issue.

[Marnes]

Would also be great if svelte-use-form can handle multiple checkboxes with the same name. I really think you should add string[] support, sure it sucks having 2 types, but there are just so many use cases for it.

I've created a PR if you would like https://github.com/noahsalvi/svelte-use-form/pull/63