Is it possible to store a different value in the model than is displayed on the input using plugins?

[markusgeert]

I'm trying to build a currency input which automatically formats the value the user enters (adding thousands separators mainly). I want to store the value resulting from this input as a number, while still displaying it formatted with comma's.

This is probably possible using a custom component, but it also seems like a good use-case for a plugin since the component itself doesn't have to be modified. Is it possible to get this behavior using plugins?

[justin-schroeder]

It is possible yes — actually making a custom input or a plugin that has a different displayed value is rather trivial. However this can get tricky. For example, lets say that your plugin is as simple as taking any text and making it uppercase. So someone types:

h

Your input stores that as the value, node.input('h'), great, now your value is h, then all we need to do is render the value as uppercase, so we simply toUpperCase() on the rendered input:

<input @input="e => node.input(e.target.value)" :value="node._value.toUpperCase()" />

Great, now the displayed value is H but the internal value is h. Here comes the problem though, when the user types the next character — let’s say "e" the e.target.value will be He So now the internal value will capture the capitalized H. This makes it very tricky to track state on the input and generally you need to write a bunch of code to self-assemble the internal state from keystrokes or perform some value diffing. Either way it gets a bit complex — but that really has nothing to do with FormKit and everything to do with the underlying complexity of the problem. Anyone who has authored a mask input will know these challenges. It gets more complicated if you start adding formatting characters because you’ll need to track the cursor position for placement before and after each keystroke. That said — yes plugins can do all of this 👍

[markusgeert]

I've played around with this idea a bit, but I can't seem to figure out how to achieve this by only using plugins. My approach has been to try and set the actual value stored in FormKit separately from the value of the html input element. However, the value set on the input element will simply get ignored (probably overwritten by either FormKit or Vue). Am I missing something obvious here? How would you approach this, apart from the practical considerations you mentioned earlier?

[sashamilenkovic]

@markusgeert We have recently released a new Currency pro input which you can check out here: https://formkit.com/inputs/currency