angular-formio set language in FormBuilder

问题

I don't find a solution for changing the language of the FormBuilder. For the renderer it is described by documentation, but it works not in Builder.

At the Builder it must be set by options, but the FormioOptions not include the language option. Is there any description or example for usage?

HTML Code

<div class="content" role="main">
  <form-builder [form]="form" (change)="onChange($event)" [options]="formOptions"></form-builder>
  <button (click)="onClick()">Formular speichern (Ausgabe auf Konsole)</button>
</div>

TypeScript Code

import { Component, ViewChild, ElementRef, EventEmitter } from '@angular/core';
import { FormIOModel } from 'src/models/formIOModel';
import { FormioOptions } from 'angular-formio';

@Component({
  selector: 'app-generator',
  templateUrl: './generator.component.html',
  styleUrls: ['./generator.component.scss']
})
export class GeneratorComponent {

  @ViewChild('json') jsonElement?: ElementRef;
  public form: FormIOModel = new FormIOModel();
  private result: FormIOModel = new FormIOModel();
  public formOptions: FormioOptions = {
    language: 'de', // that's the unknown line
    i18n: {
      de: {
        'Preview': 'Vorschau'
      }
    }
  }

  onChange(event) {
    this.result = event.form;
  }
}

Without the language line it do nothing. Is there anything else to do or configure in app.module.ts or on an other place?

Thanks

回答1:

In the demonstration repository you will find the solution

https://github.com/formio/angular-demo/tree/master/src/app/forms/custom-builder

You need to add rebuild and an emitter to load another language

[rebuild]="rebuildEmitter.asObservable()"

In the html

<form-builder [form]="bulidForm" [options]="options" (change)="onChange($event)" [rebuild]="rebuildEmitter.asObservable()"></form-builder>

In the component.ts

import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { Subject } from 'rxjs';
import { options } from './options';


@Component({
  selector: 'app-builder',
  templateUrl: './builder.component.html',
  styleUrls: ['./builder.component.scss']
})
export class BuilderComponent implements OnInit {

  @ViewChild('json') jsonElement?: ElementRef;

  public options: any;
  public rebuildEmitter: Subject<void> = new Subject<void>();

  public bulidForm: Object = {
    components: []
  };

  constructor() {
    this.getLocale();
  }

  ngOnInit(): void {
  }

  getLocale(): void {
    this.options = options;
  }

  onChange(event: any) {
    console.log({form: this.bulidForm});
    this.jsonElement.nativeElement.innerHTML = '';
this.jsonElement.nativeElement.appendChild(document.createTextNode(JSON.stringify(event.form, null, 4)));
  }
}

File options

export const options = {
  builder: {
    basic: false,
    data: false,
    premium: false,
    customBasic: {
      title: 'Basic Components',
      default: true,
      weight: 0,
      components: {
        textfield: true,
        textarea: true,
        email: true,
        number: true,
      }
    },
    advanced: {
      components: {
        email: false,
        url: false,
        tags: false,
        address: false,
        survey: false,
        currency: false,
        signature: false,
        day: false,
        phoneNumber: false,
        datetime: false
      }
    },
    layout: {
      title: 'Layout Components',
      weight: 0,
      components: {
        panel: true,
        table: false,
        tabs: false,
        well: false,
        columns: false,
        fieldset: false,
        content: false,
        htmlelement: false
      }
    }
  },
  language: 'es',
  i18n: {
    es: {
      'Label': 'Etiqueta',
      'Label Position': 'Posición de la etiqueta',
      'Placeholder': 'Marcador de posición',
      'Description': 'Descripción',
      'Tooltip': 'Tooltip',
      'Prefix': 'Prefijo',
      'Suffix': 'Sufijo',
      'Widget': 'Widget',
      'Input Mask': 'Máscara de entrada',
      'Custom CSS Class': 'Clase CSS personalizada',
      'Tab Index': 'Tab Index',
      'Hidden ': 'Oculto',
      'Hide Label': 'Ocultar la etiqueta',
      'Show Word Counter': 'Mostrar contador de palabras',
      'Show Character Counter': 'Mostrar contador de caracteres',
      'Hide Input': 'Ocultar Input',
      'Excellent': 'Excelente',
      'Initial Focus': 'Enfoque inicial',
      'Allow Spellcheck': 'Permitir revisión ortográfica',
      'Disabled': 'Deshabilitado',
      'Table View': 'Vista de tabla',
      'Modal Edit': 'Modal Edit',
      'Multiple Values': 'Valores múltiples',
      'Persistent': 'persistente',
      'Input Format': 'Formato de entrada',
      'Protected': 'Protegido',
      'Database Index': 'Índice de la base de datos',
      'Mixed (Allow upper and lower case)': 'Mezclado (Permitir mayúsculas y minúsculas)',
      'Uppercase': 'Mayúsculas',
      'Lowercase': 'Minúsculas',
      'Encrypted (Enterprise Only)': 'Cifrado (Sólo Empresa)',
      'Default Value': 'Valor por defecto',
      'Drag and Drop a form component': 'Arrastrar y soltar un componente',
      'Text Field': 'Campo de texto',
      'Email': 'Correo electrónico',
      'Text Area': 'Área de texto',
      'Panel': 'Panel',
      'Time': 'Tiempo',
      'Submit': 'Enviar',
      'Basic Components': 'Componentes básicos',
      'Layout Components': 'Componentes del diseño',
      'Advanced': 'Avanzado',
      'Hidden': 'Oculto',
      'Component': 'Componente',
      'Display': 'Mostrar',
      'Data': 'Datos',
      'Validation': 'Validación',
      'API': 'API',
      'Conditional': 'Condicional',
      'Logic': 'Lógica',
      'Layout': 'Diseño',
      'Allow Multiple Masks': 'Permitir varias máscaras',
      'Input Field': 'Campo de entrada',
      'Top': 'Arriba',
      'Left (Left-aligned)': 'Izquierda (alineado a la izquierda)',
      'Input Type': 'Tipo de entrada',
      'Collapsible': 'Colapsable',
      'Preview': 'Previsualización',
      'Text Case': 'Caso de texto',
      'Redraw On': 'Redraw On',
      'Clear Value When Hidden': 'Limpiar cuando se oculta',
      'Custom Default Value': 'Valor predeterminado',
      'Calculated Value': 'Valor calculado',
      'Calculate Value on server': 'Calcular el valor en el servidor',
      'Allow Manual Override of Calculated Value': 'Permitir la anulación manual del valor calculado',
      'Server': 'Servidor',
      'Client': 'Cliente',
      'None': 'Ninguno',
      'Validate On': 'Validar en',
      'Required': 'Requerido',
      'Unique': 'Único',
      'Minimum Length': 'Longitud mínima',
      'Maximum Length': 'Longitud máxima',
      'Minimum Word Length': 'Longitud mínima de la palabra',
      'Maximum Word Length': 'Longitud máxima de la palabra',
      'Regular Expression Pattern': 'Patrón de expresión regular',
      'Error Label': 'Etiqueta de error',
      'Custom Error Message': 'Mensaje de error personalizado',
      'Custom Validation': 'Validación personalizada',
      'JSONLogic Validation': 'Validación JSONLogic',
      'Property Name': 'Nombre de la propiedad',
      'Field Tags': 'Etiquetas Tags',
      'Custom Properties': 'Propiedades personalizadas',
      'Add Another': 'Agregar otro',
      'Save': 'Guardar',
      'Cancel': 'Cancelar',
      'Remove': 'Remover',
      'Rows': 'Filas',
      'Title': 'Título',
      'Theme': 'Tema',
      'Data Format': 'Formato de datos',
      'Advanced Logic': 'Lógica avanzada',
      'Advanced Conditions': 'Condiciones Avanzadas',
      'Simple': 'Simple',
      'HTML Attributes': 'Atributos HTML',
      'PDF Overlay': 'Overlay PDF',
      'Number': 'Número ',
      'Use Thousands Separator': 'Usar el separador de miles'
    }
  }
};

回答2:

Here is the reference please check

https://github.com/formio/angular-formio/wiki/Translations

来源：https://stackoverflow.com/questions/60667350/angular-formio-set-language-in-formbuilder

标签

angular

translation

builder

formio