Svelte: How to bind a formatted input field to a property

Question

First of all: Svelte is still new to me. I hope the question is not too trivial.

Within a simple component I want to use the content of a formatted input field for a calculation.
For example:
In the input field a Euro amount should be displayed formatted (1.000). Next to it a text with the amount plus VAT should be displayed (1.190).

How I do this without formatting is clear to me. The example looks like this:

    export let net;
    export let vat;

    $: gross = net + (net * vat / 100);
    $: grossPretty = gross.toLocaleString('de-DE',{ minimumFractionDigits: 0, maximumFractionDigits: 0 });

with a simple markup like this:

    <form>
      <label>Net amount</label>
      <input type="text" step="any" bind:value={net} placeholder="Net amount">
    </form>
    <div>
        Gros = {grossPretty} €
    </div>

In vue i used a computed property. Its getter delivers the formatted string and its setter takes the formatted string and saves the raw value. (In data() I define net, in the computed properties i define netInput. The input field uses netInput as v-model).
It looks like this:

netInput: {
   get(){
      return this.net.toLocaleString('de-DE',{ minimumFractionDigits: 0, maximumFractionDigits: 0 });
   },
   set(s){
      s = s.replace(/[\D\s._-]+/g, "");
      this.net = Number(s);
   }
}

How can I handle it in svelte?

Answer 1

You can do something somewhat similar, you create another computed variable that stores the deformatted string from the input field and is used in the calculation instead of the direct input

  export let net;
  export let vat;
  $: net_plain = Number(net.replace(/[\D\s._-]+/g, ""));
  $: gross = net_plain + (net_plain * vat / 100);
  $: grossPretty = gross.toLocaleString('de-DE',{ minimumFractionDigits: 0, maximumFractionDigits: 0 });

But maybe find a better name for the variable :)