Add formatting on input

[sandi-racy]

Hi @kevinongko!

I created a feature that allows users to perform formatting during input

[kevinongko]

Hi @sandi-racy ,

I tried your code and I cannot input decimals properly.

    <vue-numeric 
       currency="$"
       :format-input="true"
       v-model="money"
       separator=","
       precision="2"
     >
     </vue-numeric>

I also tried this approach before, formatting on input will affect decimals in a weird way #8 (comment).

any ideas?

[sandi-racy]

I have fixed the bug, check it out

[kevinongko]

I tried your new revision using the sample code below:

<template>
  <div id="app">
    <vue-numeric
       currency="$"
       :format-input="true"
       v-model="money"
       separator=","
       precision="2"
     >
     </vue-numeric>
  </div>
</template>

<script>
import VueNumeric from 'vue-numeric'

export default {
  name: 'app',

  components: {
    VueNumeric
  },

  data () {
    return {
      money: 0
    }
  }
}
</script>

Whenever I try to input anything it show NaN, undefined

Can you make a live demo or repo so I can try your code in your setup? Thanks.

[sandi-racy]

Oops sorry, I never tested it using currency
Now the bug should be gone

[kevinongko]

The component cannot accept default value from v-model, it keep showing 0 it should be 1000.

<template>
  <div id="app">
    <vue-numeric
       currency="$"
       :format-input="true"
       v-model="money"
       separator="."
       precision="2"
     >
     </vue-numeric>
  </div>
</template>

<script>
import VueNumeric from 'vue-numeric'

export default {
  name: 'app',

  components: {
    VueNumeric
  },

  data () {
    return {
      money: 1000 // Default value
    }
  }
}
</script>

[kevinongko]

I found another bug, when I accidentally press non numeric button on my keyboard such as alphabet the input show NaN, undefined

[sandi-racy]

I have fixed the bugs, check it out and let me know if you find any bugs

[kevinongko]

I found another one, try ctrl+A to select whole input and press backspace/delete
it turn the input into NaN, undefined

[kevinongko]

I just add contribution guidelines make sure to check it out :)

[sandi-racy]

I have fixed the bug and have added some tests

[kevinongko]

Nice @sandi-racy , it's good to merge now.

one last thing, IMO the props format-input could be misleading.
how about format-on-input or instant-format, what do you think?

---

edit:
I found some bugs:

• try to press - (minus) key from keyboard the input become NaN
• min and max props doesn't have any effect when format on input
• min and max props also doesn't have any effect when format on blur

[kevinongko]

Closing due to inactivity.