Generate Angular Template Form from JSON object

Update: Source code can be found here:

https://github.com/ultrasonicsoft/angular-template-form-builder

Often while building Angular applications, we build Angular Template Form which maps to our REST API request/response JSON object. We also apply some CSS library like Twitter Bootstrap for nicer look and feel of form. This process may get cumbersome if you are building some CRM or data entry specific application.

To save some developer efforts, I have built a website which generate source code of Angular Template form from given JSON object. As an output you shall get HTML form code with Twitter Bootstrap classes added, Typescript code for new member variables used for data binding with HTML controls and “submit” method.

Steps:

  1. Enter your JSON object in text box
  2. Click on “Submit” button
  3. “Output” section will show generated Angular Template Form
  4. “Template Form HTML” section will show HTML source code which can be copy pasted in your Angular application
  5. “Template Form Typescript” section will show Typescript code, especially new member variables which are used for [(ngModel)] data binding. Also “onSubmit()” method shall be generated with “formValues” JSON argument. This variable shall hold complete form data in JSON object.
  6. “Reset” button shall reset application and will be ready for next form generation.

I will try to extend this application in future by adding more features.

Cheers!

Demo:

Cloud Solution Architect | Author | Full Stack Developer | https://www.linkedin.com/in/balram-chavan | https://www.hiretheauthor.com/balramchavan

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store