如何将自定义Formio组件添加到表单管理器

时间:2019-05-08 11:00:35

标签: html angular typescript 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>

0 个答案:

没有答案