angular - FormBuilder 中的 angular-formio 设置语言

Question

我没有找到更改 FormBuilder 语言的解决方案。对于渲染器，它由文档描述，但它不适用于 Builder。

在 Builder 中，它必须由选项设置，但 FormioOptions 不包括语言选项。是否有任何使用说明或示例？

HTML 代码

<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>

打字稿代码

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;
  }
}

没有语言行它什么都不做。在 app.module.ts 或其他地方还有其他事情要做或配置吗？

谢谢

Answer 1

在演示存储库中，您将找到解决方案

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

您需要添加重建和发射器以加载另一种语言

[重建]="rebuildEmitter.asObservable()"

在 html

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

在组件.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)));
  }
}

文件选项

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'
    }
  }
};

Answer 2

这是参考请检查

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