首页 > 解决方案 > 如何将自定义formio组件添加到表单管理器

问题描述

我创建了自定义 formio 组件,并且我有表单管理器,我可以在其中显示表单列表。在此单击创建表单时,它显示一个表单构建器,我必须将我的自定义表单组件合并到该表单构建器中。有了这个我可以编辑,删除和保存我的自定义formio组件......

任何人都可以在这个问题上帮助我...

这是我的代码...

customFormioComponent.ts

 Formio.builder(document.getElementById('builder'), {}, {
      builder: {
        custom: {
          title: 'Custom',
          weight: 0,
          components: {
            address: {
              title: 'Address',
              key: 'address',
              icon: 'fa fa-th-list'
            }
           }
          },
             basic: {
          default: false,
        },
         editForm: {
        select: [
          {
            key: 'api',
            ignore: true
          },
         }
              
 

customFormioComponent.html

    <form-builder id="builder"></form-builder>

formManager.module.ts

  RouterModule.forChild(FormManagerRoutes({
            formIndex: ManagerComponent,
            formCreate:CustomFormioComponent
        }))
    ],
    declarations: [
        ManagerComponent
    ],
    exports: [
        ManagerComponent
    ],
    providers: [
        FormManagerService,
        {
            provide: FormManagerConfig, useValue: {
                tag: 'common',
                includeSearch: true,
                saveDraft: true
            }
        }
    ]

formManager.component.html

  <formio-grid *ngIf="auth.authenticated" 
              [formio]="service.formio" 
              [gridType]="'form'" 
              [query]="{tags: config.tag, type: 'form'}"
              (rowAction)="onAction($event)" 
              (rowSelect)="onSelect($event)" 
              [createText]="'Create Form'" 
              (createItem)="onCreateItem()">
            </formio-grid>

标签: htmlangulartypescriptformio

解决方案


推荐阅读