How to get all drag and dropped components in formio file.
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
@Output()
valueChange = new EventEmitter<string>();
@Input()
disabled: boolean;
constructor(private formBuilderService: FormBuilderService) {}
}
@jyotiyi - did you find any solution for this?