如何在Angular Formio.io表单构建器UI加载时重命名标签及定制构建器

一、直接修改组件全局显示标签 #

无需修改Formio源码，在Angular项目初始化阶段，通过覆盖组件的配置属性即可修改构建器中的显示标签。

在你的表单构建器组件（如FormBuilderComponent）中添加以下逻辑：

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

@Component({
  selector: 'app-form-builder',
  templateUrl: './form-builder.component.html',
  styleUrls: ['./form-builder.component.css']
})
export class FormBuilderComponent implements OnInit {
  ngOnInit(): void {
    // 定位Checkbox组件（对应原"select checkbox"标签），修改其显示标题
    const checkboxComponent = Formio.Components.components.checkbox;
    if (checkboxComponent) {
      checkboxComponent.title = 'Multiselect';
      // 可选：修改组件描述文本
      checkboxComponent.description = '多选选项组';
    }
  }
}

组件模板中正常使用表单构建器：

<formio-builder [form]="initialForm" [options]="builderOpts"></formio-builder>

二、加载手动定制的表单构建器 #

如果需要更深度的定制（比如筛选组件、自定义分类），可以手动定义构建器的组件配置，替换默认的构建器结构。

1. 定义自定义构建器配置 #

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

@Component({
  selector: 'app-custom-form-builder',
  templateUrl: './custom-form-builder.component.html',
  styleUrls: ['./custom-form-builder.component.css']
})
export class CustomFormBuilderComponent {
  // 初始化空表单结构
  initialForm = { components: [] };

  // 完全自定义的构建器选项
  customBuilderOpts = {
    builder: {
      // 自定义组件分类：基础组件
      basic: {
        title: '基础组件',
        components: [
          {
            type: 'textfield',
            title: '单行文本',
            key: 'textfield',
            icon: 'fa fa-text-width'
          },
          // 重命名后的Multiselect组件
          {
            type: 'checkbox',
            title: 'Multiselect',
            key: 'checkbox',
            icon: 'fa fa-check-square-o',
            description: '选择多个选项'
          },
          {
            type: 'select',
            title: '下拉选择',
            key: 'select',
            icon: 'fa fa-list-ul'
          }
        ]
      },
      // 自定义组件分类：布局组件
      layout: {
        title: '布局组件',
        components: [
          {
            type: 'columns',
            title: '多列布局',
            key: 'columns',
            icon: 'fa fa-columns'
          }
        ]
      }
    }
  };
}

2. 在模板中加载自定义构建器 #

<formio-builder [form]="initialForm" [options]="customBuilderOpts"></formio-builder>

三、关键注意事项 #

• 组件修改逻辑需在Formio初始化完成后执行，推荐放在ngOnInit钩子中。
• 自定义构建器时，组件的type必须与Formio原生组件的类型保持一致（如checkbox对应原生多选组件），否则无法正常渲染。
• 确保@formio/angular与formiojs版本兼容，避免API差异导致的问题。

内容的提问来源于stack exchange，提问作者Rohan Prajapati