Polymer 1.x: How to format a number while typing it into paper-input?

Question

TL;DR: I want my numbers to look like 1,500 (not 1500) when entering it in an <input (actually <paper-input or even <iron-input?) form field. Similar to this example except using Polymer only and not AngularJS.

I want to format a number in paper-input (using, say, Numeral.js) while it's being entered by the user. I don't really know where to begin or what to try. I want to access the numeric value in the JS, but I want the user to be able to see the nicely formatted (string) version while entering it.

Is this even possible? Or perhaps I might need a separate display field? But then that would defeat the purpose of the paper-elements from a UX standpoint? Any help?

Also, note per the second comment on this SO question:

Worth noting that Number.prototype.toLocaleString still does not work in Safari, in 2016. Instead of actually formatting the number, it just returns it, no error thrown. Having the biggest facepalm today as a result of that... #goodworkApple – aendrew

Here is the jsbin. ... http://jsbin.com/wosoxohixa/1/edit?html,output

http://jsbin.com/wosoxohixa/1/edit?html,output

<!doctype html>
<head>
  <meta charset="utf-8">
  <base href="https://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">
  <link href="paper-input/paper-input.html" rel="import">
  <script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/1.4.5/numeral.min.js"></script>
</head>
<body>

<dom-module id="x-element">

<template>
  <style></style>

<paper-input value="{{num}}"></paper-input>

</template>

<script>
  (function(){
    Polymer({
      is: "x-element",
      properties: {
        num: {
          type: Number,
          value: function() {
            return numeral(1500).format('0,0');
          },
        },
      },
    });
  })();
</script>

</dom-module>

<x-element></x-element>

</body>

Have you tried something like binding value to a function where you do formatting? — a1626, Oct 04 '16 at 12:04

Let Me Tink About It · Answer 1 · 2016-10-05T15:09:39.337

Based on the answer from @akc42, I constructed the following working jsBin. ... http://jsbin.com/zunezojuzu/1/edit?html,console,output

http://jsbin.com/zunezojuzu/1/edit?html,console,output

<!doctype html>
<head>
  <meta charset="utf-8">
  <base href="https://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">
  <link href="paper-input/paper-input.html" rel="import">
  <script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/1.4.5/numeral.min.js"></script>
</head>
<body>

<dom-module id="x-element">

<template>
  <style></style>

<paper-input value="{{num}}"></paper-input>

</template>

<script>
  (function(){
    Polymer({
      is: "x-element",
      properties: {
        num: {
          type: String,
          observer: '_numChanged',
        },
      },
      attached: function() {
        this.numBeingChanged = false;
      },
      _numChanged: function(num) {
        console.log('num', num);
        if (!this.numBeingChanged) {
          this.numBeingChanged = true; //prevent recursion
          var x = num.replace(/\D/g,'')
          x = parseInt(x);
          console.log('x', x);
          this.set('num', numeral(x).format('0,0'));
          this.numBeingChanged = false;
        }
      }
    });
  })();
</script>

</dom-module>

<x-element></x-element>

</body>

score 1 · Accepted Answer · answered Oct 04 '16 at 16:16

1

I do something similar with a datepicker based around paper input. Put an observer on the num property, and it will get called as every new character arrives.

You also need to be careful with validation as you may end up trying to validate 1,0 if that is the way the user has typed it in. (assuming he may type with or without your formatiing

answered Oct 04 '16 at 16:16

akc42

4,893
5
41
60

Could you maybe show your ideas in a code example? [Maybe clone this jsBin and modify it](http://jsbin.com/wosoxohixa/1/edit?html,output)? The problem I'm having is I don't know where to begin. For example, I feel the `value` attribute should be the formatted string. But to enter the value in the first place, I feel it should be a number that then gets formatted *into* a string. It's like the chicken or the egg problem. And I'm not sure how to crack it. – Let Me Tink About It Oct 04 '16 at 17:18
try that - its not right because I don't know how numeral works, but you can see how it formats on the fly http://jsbin.com/qivimomusa/1/edit?html,output – akc42 Oct 04 '16 at 20:43
You sent me in the right direction. [I made this jsBin based on your input](http://jsbin.com/vijarijiji/1/edit?html,console,output). – Let Me Tink About It Oct 04 '16 at 22:28

Polymer 1.x: How to format a number while typing it into paper-input?

2 Answers2