Home

Awesome

angularjs-form-builder

A simple form builder application written in AngularJS. It uses custom directives.

For a complete overview of the project and features, see http://selmanh.github.io/angularjs-form-builder

About

I have been working on AngularJS project for last couple of months. One of my assignments was to implement custom form builder that allows system admins to create custom forms, and allows users to view created forms, fill them and submit the data.

It took plenty of time to finish this task. While doing it, I had to make 100+ searches on Google, spend couple of days, and read a lot of stuff. So, I decided to create an open-source project and share my knowledge on this topic.

Dependencies

Installing the Application

 $ npm install -g grunt-cli
 $ npm install -g grunt
 $ npm install -g bower 

 $ git clone git@github.com:/selmanh/angularjs-form-builder.git 
 $ cd angularjs-form-builder/ 

 $ npm install 

 $ bower install

Launching the App

 $ grunt server --force

Technical Details

Currently, there are one service (form-service) and two directives (form-directive and field-directive).

The form service helps to retrieve form properties from a json file. It also holds an array of possible fields that can be used while creating a new form.

After getting the form variable, we use it in the form-directive as follows:

<form-directive form="form"> </form-directive>

And inside the form-directive, we use the field-directive:

<div ng-repeat="field in form.fields">
   <field-directive field="field"> </field-directive>
</div>

Form directive checks type of the field, and based on that type, it puts the template between directive tags.

switch(type) {
     case 'textfield':
         templateUrl = './views/directive-templates/field/textfield.html';
         break;
     case 'email':
         ...

At the end, here is how it looks:

<form-directive form="form" class="ng-isolate-scope ng-scope">
   ...
   <form name="myForm" id="myForm">
      ...
      <div ng-repeat="field in form.fields">
         <field-directive field="field">
            ...
         </field-directive>
      </div>
   </form>
</form-directive>

Contact