Formio Angular表单构建器：拖拽组件后自定义头部，移除Component字样

以下是几种可行的方案，帮你移除组件名称后的「Component」字样：

1. 自定义组件（推荐，最灵活） #

通过扩展Formio原生组件，直接修改其显示名称：

• 创建自定义TextField组件，继承原生组件并修改标题：

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

@Component({
  selector: 'app-custom-textfield',
  template: '<ng-container></ng-container>'
})
export class CustomTextFieldComponent extends TextFieldComponent {
  constructor() {
    super();
    this.component.title = 'Text Field'; // 直接设置为不含「Component」的名称
  }
}

• 在AppModule中注册并替换默认组件：

import { FormioModule, Components } from '@formio/angular';
import { CustomTextFieldComponent } from './custom-textfield.component';
import { NgModule } from '@angular/core';

// 替换默认的textfield组件为自定义组件
Components.setComponent('textfield', CustomTextFieldComponent);

@NgModule({
  imports: [FormioModule],
  declarations: [CustomTextFieldComponent],
  entryComponents: [CustomTextFieldComponent]
})
export class AppModule { }

其他组件（如Checkbox、Select等）可按相同逻辑处理。

2. 覆盖本地化配置 #

Formio的组件名称通过本地化文件定义，直接修改对应语言包即可：

• 在项目中创建自定义本地化文件（如src/assets/formio/i18n/en.json），修改组件名称：

{
  "textfield": "Text Field",
  "checkbox": "Checkbox",
  "select": "Select"
  // 按需添加其他组件的名称修改
}

• 在AppModule中配置加载自定义本地化文件：

import { FormioAppConfig } from '@formio/angular';
import { NgModule } from '@angular/core';

export const appConfig: FormioAppConfig = {
  i18n: {
    en: require('./assets/formio/i18n/en.json')
  }
};

@NgModule({
  providers: [{ provide: FormioAppConfig, useValue: appConfig }]
})
export class AppModule { }

3. 精准CSS隐藏（快速临时方案） #

如果之前CSS没生效，大概率是选择器不够精准。尝试以下CSS代码：

/* 隐藏组件配置弹窗头部的「Component」后缀 */
.formio-component-editor .modal-header h4 span:last-child {
  display: none;
}

/* 若上述选择器不生效，试试这个更通用的 */
.formio-modal .modal-title span.text-muted {
  display: none !important;
}

注意：需确保CSS文件在Formio样式之后加载，或者提升选择器优先级。

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