How to Add Field Translations in Form.io Form Builder (Angular)

I’m using Form.io in an Angular 18 project and I want to allow users to add translations for form fields in the Form Builder. However, I can’t find a way to do this. What I’m using:

• NPM package : https://www.npmjs.com/package/formio
• Here the Angular github : https://www.npmjs.com/package/formio
• Form Builder Demo: https://formio.github.io/angular-demo/#/forms/builder

What I want to achieve:

I would like to extend the form builder so that each field (e.g., text inputs, selects) can have translations. Ideally, users should be able to input translations for multiple languages when defining a field.

What I’ve tried:

1. I looked into the i18n support in Form.io, but I couldn’t find any built-in way to add translation options at the field level in the builder.
2. I checked the custom components documentation, but I’m unsure if that’s the right approach.
3. I know how to change the language if I already have the translations: angular-formio set language in FormBuilder & How to localize form builder - formio

Questions:

• Is there a built-in way to support translations per field in the Form.io form builder?
• If not, what would be the best approach to implement this? (e.g., custom components, modifying the JSON schema, etc.)

Any guidance would be greatly appreciated!

Continue reading...