angulartypescriptdrag-and-dropformioangular-dragdrop

integrate formio api with my angular project


Source code in git

Live Demo

I want to develop Angular8 drag and drop form builder functionality in my angular application In the above git code it is developed using pure formio

My requirement is I want to integrate this angular drag and drop functionality in my already existing angular project.

I am struck to integrate formio, Please help me How can I strat the integration.

is there any tutorial available with explanation?


Solution

  • first you need to install formio in your project

    npm install --save angular-formio
    

    then import formioModule in your project module

    import { FormioModule } from 'angular-formio';
    @NgModule({
        imports: [ BrowserModule, CommonModule, FormioModule ],
        declarations: [ AppComponent ],
        bootstrap: [ AppComponent ]
    })
    export class AppModule { }
    

    after that if you want to build a form using formio then call formio-builder in your component and save form json in database by calling rest api.

    <form-builder [form]="{
      components: []
    }"></form-builder>
    

    and if you want to show your form in component then use formion renderer

    <formio src='https://examples.form.io/example'></formio>
    

    let me know if you need any help.