Format and parse input

Customizing Tina
Format and Parse Input

The format and parse props can be used to customize the value of the form (what is rendered) and the value of the data being saved. See the following example:

// ...fields
{
 name: "username",
 type: "string",
 label: "Username",
 ui: {
// is called on every form change but result is stored in data and not in the form value (saved to file but not displayed to the user)
   parse: (val?: string)=>val && val.toUpperCase(),
// Is called on every form change and the result is put back into the value of the form (displayed to the user)
   format: (val?: string)=> (val ? val.toLowerCase() : ""),
 },
},

For this example, as the user types, they will see all lowercase characters. When it is saved, it will be all uppercase characters.

We can also use this to cast inputs to numbers that might have otherwise been saved as strings. See this example for more details.

Last Edited: January 1, 1970

Docs