Translations

Formio.js uses i18n, a lightweight translation module, to allow users add and manipulate a forms language output. To learn more about accomplish using just formio.js check out those docs here. This example goes one step further, leveraging in form event listeners to change form elements via inside an Angular 2+ application.

Project Context

Either launch an existing Angular 2+ application or create a new Angular project by following the getting started guide. The angular-formio wiki home has additional instructions on how to properly install and import angular-formioand the FormioModule into the app.module.ts. The project will require these modules to render the form JSON. Translation can be set at run-time, added after the fact, and can be swapped out at will without redrawing the form object.

example.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-index',
  template: '<formio [src]="formURL" [renderOptions]="renderOptions"></formio>'
})

export class IndexComponent implements OnInit {
  formURL: string;
  
  constructor() {
    this.formURL = 'https://wzddkgsfhfvtlmv.form.io/translations';
    this.renderOptions = {
      language: 'sp',
      i18n: {
        sp: {
          'First Name': 'Nombre de pila',
          'Last Name': 'Apellido',
          'Enter your first name': 'Ponga su primer nombre',
          'Enter your last name': 'Introduce tu apellido',
          'How would you rate the Form.io platform?': '¿Cómo calificaría la plataforma Form.io?',
          'How was Customer Support?': '¿Cómo fue el servicio de atención al cliente?',
          'Overall Experience?': '¿Experiencia general?',
          Survey: 'Encuesta',
          Excellent: 'Excelente',
          Great: 'Estupendo',
          Good: 'Bueno',
          Average: 'Promedio',
          Poor: 'Pobre',
          'Submit': 'Enviar'
        }
      }
    };
  }
}

Form Defaults

Here is a list of some helpful defaults:

{
  error : "Please fix the following errors before submitting.",
  invalid_date :"{{field}} is not a valid date."
  invalid_email : "{{field}} must be a valid email."
  invalid_regex : "{{field}} does not match the pattern {{regex}}."
  mask : "{{field}} does not match the mask."
  max : "{{field}} cannot be greater than {{max}}."
  maxLength : "{{field}} must be shorter than {{length}} characters."
  min : "{{field}} cannot be less than {{min}}."
  minLength : "{{field}} must be longer than {{length}} characters."
  next : "Next"
  pattern : "{{field}} does not match the pattern {{pattern}}"
  previous : "Previous"
  required : "{{field}} is required"
}

Manual Definition

Feel free to replace the this.formURL with a component object

{
  components: [
    {
      key: "panel2",
      title: "Language",
      theme: "default",
      components: [
        {
          key: "panel2Table",
          numRows: 1,
          numCols: 2,
          rows: [
            [
              {
                components: [
                  {
                    input: true,
                    label: "English",
                    key: "panel2TableEnglish",
                    size: "md",
                    action: "event",
                    theme: "primary",
                    type: "button",
                    event: "makeEnglish"
                  }
                ]
              },
              {
                components: [
                  {
                    input: true,
                    label: "Spanish",
                    key: "panel2TableSpanish",
                    size: "md",
                    action: "event",
                    theme: "primary",
                    type: "button",
                    event: "makeSpanish"
                  }
                ]
              }
            ]
          ],
          type: "table",
          label: "panel2Table",
          customClass: "custom-table"
        }
      ],
      type: "panel",
      breadcrumb: "default",
      label: "panel2"
    },
    {
      key: "panel",
      title: "Translations",
      theme: "default",
      components: [
        {
          input: true,
          label: "Your Name",
          key: "yourName",
          validate: {
            required: true
          },
          type: "textfield"
        },
        {
          input: true,
          inputType: "email",
          label: "Unique Email Address",
          key: "uniqueEmailAddress",
          unique: true,
          type: "email",
          validate: {
            required: true
          }
        },
        {
          label: "Columns",
          key: "columns",
          columns: [
            {
              components: [
                {
                  autofocus: false,
                  input: true,
                  tableView: true,
                  inputType: "text",
                  label: "Matching Text Field",
                  key: "matchingTextField",
                  validate: {
                    required: true
                  },
                  type: "textfield"
                }
              ],
              width: 6
            },
            {
              components: [
                {
                  input: true,
                  inputType: "text",
                  label: "Confirm Text Field",
                  key: "confirmTextField",
                  validate: {
                    required: true,
                    custom: "valid = (input === data.matchingTextField) ? true : 'Must Match Other Field';"
                  },
                  type: "textfield",
                  labelPosition: "top",
                  customError: "Unexpected end of input"
                }
              ],
              width: 6
            }
          ],
          type: "columns"
        }
      ],
      type: "panel"
    },
    {
      input: true,
      label: "Submit",
      key: "submit",
      action: "submit",
      theme: "primary",
      type: "button"
    }
  ]
}