angular icon indicating copy to clipboard operation
angular copied to clipboard

How to get all drag and dropped components in formio file.

Open jyotiyi opened this issue 4 years ago • 1 comments

Here i am getting all drag and dropped components from localstorage. But i want to get all selected components in formio file edit function. How to get?

formio.ts file import { Injector } from '@angular/core'; import { Formio, FormioCustomComponentInfo, FormioUtils, registerCustomFormioComponent } from 'angular-formio'; import { Components , Utils } from 'formiojs'; import { EditTextfieldComponent } from '../custom-component/EditTextfield.component'; import { FormBuilderService } from '../services/formBuilderService'; import * as formUtils from 'formiojs/utils/formUtils.js';

const COMPONENT_OPTIONS: FormioCustomComponentInfo = { type: 'textfield', title: 'Text Field', icon: 'terminal', group: 'basic', selector: 'my-textfield', schema: { label: 'Text Field', key: 'textField', type: 'textfield' }, editForm : editComponent, };

export function registerTextFieldComponent(injector: Injector) { registerCustomFormioComponent(COMPONENT_OPTIONS, EditTextfieldComponent, injector); } const editForm = Components.components.textfield.editForm;

export function editComponent() { const {components} = editForm();

  const formOutput = JSON.parse(localStorage.getItem('formdata'));     
  const formData = formOutput.components;
  const dataValue = [];
  formData.map(comp=>{
    if(comp.type == "datasource") {
      dataValue.push({label: comp.key,value: comp.key});
    }
  });

  if (Array.isArray(components) && components.length) {        
  const [tabs] = components;
  const changedTabsComponents = tabs.components.map(tab => {
    // Change what the tabs look like and what components do they have
    const {key, components} = tab;

    switch (key) {
      case 'data': {
        const newField = {
            type: 'select',
            input: true,
            key: 'dataSource',
            label: 'Select Data Source Component',
            weight: 0,
            tooltip: 'The source to get the data. You can fetch from data source component.',
            data: {
              values: dataValue
            }
        };
        components.splice(2,0,newField);
      }
      break;
    }
    return tab;
  });
  tabs.components = changedTabsComponents;
}
  return {components};

}

component file import { Component, EventEmitter, Input, Output } from '@angular/core'; import { FormioCustomComponent, Components, FormioEvent } from 'angular-formio'; import { registerTextFieldComponent } from '../custom-component/EditTextfield.formio'; import { FormBuilderService } from '../services/formBuilderService';

@Component({ selector: 'app-text-field', template: ' ' }) export class EditTextfieldComponent implements FormioCustomComponent { @Input() value: string;

@Output()
valueChange = new EventEmitter<string>();

@Input()
disabled: boolean;      
constructor(private formBuilderService: FormBuilderService) {}    

}

jyotiyi avatar Oct 26 '21 08:10 jyotiyi

@jyotiyi - did you find any solution for this?

dinbtechit avatar Sep 29 '23 22:09 dinbtechit