February 9, 2019

angular 5 drag and drop form builder

If you guys looking for some basic angular 5 dynamic drag and drop custom form builder check out my small project at



Hello guys i needed to build an custom formbuilder for surveys which was most of similar to google forms but problem was i can’t have the data in my hand for any kind of further manipulation. as i needed this for my angular 6 project i planned to build this my own and look for some reference if possible. I couldnt find and drag and drop available for angular 4,5,6 projects . i do find some drag and drop form builders in pure javascript which want helpfull for my case.

So guys this is made for quickly generating forms which supports so many fields as default and you can customize it to top level. My codes are shaered at https://github.com/shakalya195/angular-5-formbuilder .


  1. Build in angular 6.
  2. drag and drop for input fields.
  3. build in submit button.
  4. each input field is highly customizable.
  5. you can set and change your own input model.
  6. required validation is added.
  7. any custom regex validation  is applicable.
  8. removal of field is possible
  9. toggle input settings.
  10. live form output i put for you, in my case i made a separate page to display as i was storing this form to MONGO database.



You may also like...