Research/develop integration with `imask`

[pablo-abc]

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 both felte and @imask/svelte or if a new extender (e.g. @felte/imask) would need to be made.

[taffit]

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:

• Alternative 1:
  • Set the initial value directly on the element instead of using initialValues on form creation.
• Alternative 2:
  • Remove the imask-action from the element
  • Create the mask during onMount to the element

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.