I want to use the vaadin text field with polymer and I want the text to be auto formatted to money format like $4,500 or $10,000 while user is typing. I am able to get the prefix and numbers only but not the comma.
<vaadin-text-field prevent-invalid-input pattern="[0-9]*" style = "width: 6em"><div slot="prefix">$</div> </vaadin-text-field>.
I believe vaadin-text-field does not have any direct property or way to do this. I made a workaround by making a component wrapper for it. Basically, it validates input as users type and adds commas in the right place. It's compatible with . as input as well. Use the property comma to turn the feature on and off. The repo link is below.