vkatsar/dynforms

Angular JS dynamic forms generator

akat-form-creator

Angular JS dynamic forms generator

Under Heavy development...

What is that?

It creates forms based on JSON structure for angularJS.

How to install this?

You can simply install it using bower

bower install akat-form-creator --save

Include this on your app dependencies

angular.module('myApp', [
  'akat-form-creator'
])

Controller Example

$scope.formdata = {
    "gender": "male",
    "title": "Title goes here..."
};
    
$scope.form = {
    name: 'formname',
    fields: [{
      type: 'elemtextfield',
      name: 'title',
      label: 'Title',
      placeholder: 'My Title',
      class : "col-md-6"
    },
    {
      type: "elemselectbox",
      name: "gender",
      label: "Select a gender",
      class : "col-md-4",
      options : [
        {
          name: "male",
          value: "male"
        },
        { 
          name: "female",
          value: "female"
        }
      ]
    }]
}

Angular View

  <dynform structure="form" model="formdata"></dynform>

Available Elements

• Textfield
• Textarea
• Email
• Password
• Checkbox
• Radio buttons
• Html editor
• Select Box
• Date Picker
• Tags
• Bootstrap Tabs
• TODO :: Array
• TODO :: Object

Elements JSON Format

TextField

{
  "type": "elemtextfield",
  "name": "title",
  "label": "Title",
  "placeholder": "My Title",
  "class" : "col-md-6"
}

Textarea

{
  "type": "elemtextarea",
  "name": "textarea",
  "label": "Comments",
  "class": "col-md-6"
}

Email

{
  "type": "elememail",
  "name": "email",
  "label": "Enail",
  "placeholder" : "[email protected]",
  "class": "col-md-6"
}

Password

{
  "type": "elempassword",
  "name": "password",
  "label": "Password",
  "placeholder" : "*******",
  "class": "col-md-6"
}

CheckBox

{
  "type": "elemcheckbox",
  "name": "active",
  "label": "Activate",
  "text": "Enable or disable this",
  "class": "col-md-6"
}

Radio Buttons

{
  "type": "elemradio",
  "name": "types",
  "label": "Types",
  "values": [{
             "value": "red",
             "text": "red color"
             },{
              "value": "green",
              "text": "green color"
             }],
  "class": "col-md-6"
}

HTML

{
  "type": "elemrichtext",
  "name": "richtext",
  "label": "Html",
  "class": "col-md-12"
}

SelectBox

{
  "type": "elemselectbox",
  "name": "gender",
  "label": "Select a gender",
  "class": "col-md-4",
  "options" : [
            {
              "name": "male",
              "value": "male"
            },
            { 
              "name": "female",
              "value": "female"
            }
          ],
  }

Date Picker

{
  "type": "elemdatepicker",
  "name": "date",
  "label": "Date",
  "placeholder": "dd/mm/yyyy",
  "class": "col-md-6",
}

Tags

{
  "type": "elemtags",
  "name": "tags",
  "label": "Tags",
  "class": "col-md-12"
}

Tabs

{
  "type": "elemtabs",
  "name": "tabs",
  "label": "test",
  "class": "col-md-6",
  "tabs": [
            {
              "default": true,
              "tabname": "tab1",
              "name": "tab1",
              "fields": []
            },
            {
              "default": true,
              "tabname": "tab2",
              "name": "tab2",
              "fields": []
            }
          ]
}