How to format a field on the add form on forestadmin?

[Joel_Alexandre_Khang]

Hey guys,

I want my phone/fax number field to be formatted with the proper formatting for schema/USPS.
Is it possible to do that directly on this form ?

[anon39940173]

Hello @Joel_Alexandre_Khang

Forest Admin currently supports different widgets which can be chosen in the configuration.
However, we have no specific widget for editing phone numbers.

A solution can be to

• Create two smartfields which automatically format the phone number on save (implement that on the set method)
• Hiding the real fields

Here is documentation for that pattern

Add validation to a smart field edition

collection('customers', {
  fields: [
    {
      field: 'formattedPhone',
      type: 'String',
      get (customer) {
        return customer.phone;
      },
      set (customer, value) {
        // remove all spaces and parenthesis
        const phone = value.replace(/ \)\(/g, '');
        
        // phone included the international prefix
        if (phone.length === x)
         customer.phone = `(+${phone.substring(0,2)}) ${phone.substring(2,2)}`
        // phone did not include international prefix
        else
         ...
      },
    },
  ]
});