Format TextField in Vaadin 8

Vaadin 6 / 7 / 8
1

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

2

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.

3

I’m glad you found it useful. I try to add new stuff. Cool if you have time to patch something too.

4

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 :slight_smile: ) and phone number but phone is not working :slight_smile: (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 !

5

Fixed the typo in delimiter and added the force uppercase for IBAN. Available in v1.1