Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Format TextField in Vaadin 8
Hi everyone,
I would like to format data (for example IBAN) inside a textField.
For example in database: IBAN = FR7630001007941234567890185
Inside the textfield FR76 3000 1007 9412 3456 7890 185
If the user enters FR7630001007941234567890185 then on blur (for example) the texfield will be formatted:
FR76 3000 1007 9412 3456 7890 185
I tried inside a binder
binder.forField(getIban())
.withConverter(getIBANConverter()) // I use a converter to "format" my IBAN
.withValidator(new IBANValidator())
.bind(Account::getIban,Account::setIban);
But the textfield is never formatted.
Is there an example of formatter (there is no more PropertyFormatter in vaadin 8) ? (Perhaps I have to extend the TextField component or something else)
I think the binder should not format the data (that's a problem of the Field component not the binder)
Thanks
You can try if this add-on I created helps you https://vaadin.com/directory#!addon/textfield-formatter
I just did it today in a couple of hours, so expect some kinks.
I keep adding new features from Cleave.js and documentation later.
Johannes Häyry: You can try if this add-on I created helps you https://vaadin.com/directory#!addon/textfield-formatter
I just did it today in a couple of hours, so expect some kinks.I keep adding new features from Cleave.js and documentation later.
I understand how the link between cleave.js and Vaadin is done. It's working for IBAN Formatter.
I change IBAN Formatter to ForceCase.UPPER.
There is some typo problem I think (delimeter(s) instead delimiter(s)).
I try to update locally the add-on to add numeral type (that's easy :) ) and phone number but phone is not working :) (and the phone number formatter is quite huge for international phone number).
I will try to "push" a new version if I can ;).
But it does exactly what I need.
Thanks a lot Johannes !
I'm glad you found it useful. I try to add new stuff. Cool if you have time to patch something too.
Fixed the typo in delimiter and added the force uppercase for IBAN. Available in v1.1