search

noahsalvi / svelte-use-form

The most compact reactive form controller (including Validation) that you'll ever see.
MIT License
252 stars 14 forks source link

Using library with components #16

Closed jonathanblancor closed 3 years ago

jonathanblancor commented 3 years ago

Hi,

I tried using this with an Input component I have, but it did not work.

The reason is that the library uses use:validators={...} but Svelte complains saying Actions can only be applied to DOM elements, not components.

Can this library be used with components or am I not using it correctly?

noahsalvi commented 3 years ago

It can be used with components but you will need to use the use:validators function directly on the input element in the component.

Here an example. https://svelte.dev/repl/75cb7d6740fd4d9aad011eafe9ea1be5?version=3.38.3

If you can't modify the component, you can also set the validators by setting them in the useForm function like this: const form = useForm({ email: { validators: [required, minLength....] } }); You just need to make sure, that the name attribute on the input element matches the one given in the properties. <input name="email" />

jonathanblancor commented 3 years ago

Thanks!