Hi guys, I have a regular text component where people have to enter a certain account number, similar to this: AB 1234 1234
How can I setup the component in a way, so that it gets automatically formatted like that? I want to type in AB12341234 but it should display as AB 1234 1234. But the actual value of course should be without the empty spaces, I want to save it as AB12341234
Is that possible?
Hello @Rupur!
You can use a Transformer to take the inputted string and mutate a copy of this to be a new string with the spaces at the given locations.
While at the same time not mutating the original string so that it can be saved to your DB without any empty space chars.
Here is a code snippet example using regex to accomplish this. You will likely have to change some of this inside the transformer but it's a useful bit to start from. You can then display this with a text component and put the source as the transformer.
Use a regular expression to insert a space after the first two characters and then after every four characters
return input.replace(/^(.{2})(.{4})(.*)$/, '$1 $2 $3')
const inputString = 'AB12341234'; //replace with text input source//
Output: 'AB 1234 1234'