Dynamic forms with angularjs-form-builder

posted in: Forms | 0

The hackathon was focussed on finding a common approach to enable Product Owners to define Entity Attributes in a new Domain Model.

We started out playing with angularjs-form-builder and see value in its approach.

An example form is here — http://selmanh.github.io/angularjs-form-builder/#/forms/1/view

Click on the “Show form json object” button to see the “json” object which is responsible for rendering the example form.

{
  "form_id": "1",
  "form_name": "My Test Form",
  "form_fields": {
    "1": {
      "field_id": 1,
      "field_title": "First Name",
      "field_type": "textfield",
      "field_value": "John",
      "field_required": true
    },
    "2": {
      "field_id": 2,
      "field_title": "Last Name",
      "field_type": "textfield",
      "field_value": "Doe",
      "field_required": true
    },
    "3": {
      "field_id": 3,
      "field_title": "Gender",
      "field_type": "radio",
      "field_value": "2",
      "field_required": true,
      "field_options": [
        {
          "option_id": 1,
          "option_title": "Male",
          "option_value": 1
        },
        {
          "option_id": 2,
          "option_title": "Female",
          "option_value": 2
        }
      ]
    },
    "4": {
      "field_id": 4,
      "field_title": "Email Address",
      "field_type": "email",
      "field_value": "test@example.com",
      "field_required": true
    },
    "5": {
      "field_id": 5,
      "field_title": "Password",
      "field_type": "password",
      "field_value": "",
      "field_required": true
    },
    "6": {
      "field_id": 6,
      "field_title": "Birth Date",
      "field_type": "date",
      "field_value": "01.21.1980",
      "field_required": true
    },
    "7": {
      "field_id": 7,
      "field_title": "Your browser",
      "field_type": "dropdown",
      "field_value": "1",
      "field_required": false,
      "field_options": [
        {
          "option_id": 1,
          "option_title": "-- Please Select --",
          "option_value": 0
        },
        {
          "option_id": 2,
          "option_title": "Internet Explorer",
          "option_value": 1
        },
        {
          "option_id": 3,
          "option_title": "Google Chrome",
          "option_value": 2
        },
        {
          "option_id": 4,
          "option_title": "Mozilla Firefox",
          "option_value": 3
        }
      ]
    },
    "8": {
      "field_id": 8,
      "field_title": "Additional Comments",
      "field_type": "textarea",
      "field_value": "Please type here..",
      "field_required": false
    },
    "9": {
      "field_id": 9,
      "field_title": "I accept the terms and conditions.",
      "field_type": "checkbox",
      "field_value": "0",
      "field_required": true
    },
    "10": {
      "field_id": 10,
      "field_title": "I have a secret.",
      "field_type": "hidden",
      "field_value": "X",
      "field_required": false
    }
  }
}

 

Leave a Reply