Open pablo-abc opened 2 years ago
Just pasting here my experiences from the other issue, maybe it can be helpful.
What doesn't work: Having imask as action (as @imask/svelte provides) on the input-element in combination with some other library that accesses the field/events of the element, e. g. by setting the initial value during form creation. I experimented a bit with the events and the action, as e. g. adding an on:focus which invokes the sometimes mentioned IMask.updateValue(), but to no avail. And I'm also too noob on the frontend site to invest more time on this.
What does work, though:
This way it seems that imask got the value updated (I experienced some other quirks after resetting the form, but that may be my fault, i. e. parts of the mask reflect the former modifications. E. g. the field contains 1.000 (masked) -> I change it to 231.000 (masked) -> Reset -> 1.000 -> I add 987 on the head of the number -> 9.8731.000, i. e. the 3 from the previous edit is added. May be my fault, though).
What helps in this case with svelte-use-form is, that it contains a store with all the html-elements of the form. This way you can easily iterate and e. g. attach a mask or similar. That would be maybe useful also for Felte (or is there a way to iterate the form-controls that I didn't find yet?)
But I'm too noob to debug this further, unfortunately.
Edit: A working REPL with imask used directly (i. e. without @imask/svelte
-action) is available here. No validations at the moment, and you need to define the elements for the controls each on its own. The masks are added during onMount
in this case and the initial values are set using the value
-attribute of the input-element.
A couple of issues have mentioned already trying to use
@imask/svelte
with no luck. Research should be done to see if it's possible to use bothfelte
and@imask/svelte
or if a new extender (e.g.@felte/imask
) would need to be made.