Creating Dynamic Web Forms Using AngularJS
Azoft Blog Creating Dynamic Web Forms Using AngularJS

Creating Dynamic Web Forms
Using AngularJS

By Max Ryabchenko on July 17, 2014

creating dynamic forms using angularjs

Recently we participated in a very large project: a new e-procurement system for the Russian government. Our team worked on the Standards & References section, which is technically a database, and one of my specific tasks was to provide data visualization. As the project required creating a fair amount of similar pages, too time-consuming to do manually, I developed a dynamic form-generation solution in AngularJS. Here was my approach.

Solution overview

Most of the project’s pages offered the user the same function set – CRUD. For each new entity, the configuration of its fields was written into the form generator (by myself) and it populates new web pages with unique content along with the basic function set mentioned above.

Solution benefits

Using dynamic forms provides automation with a number of obvious benefits:

  • It saves time writing code;
  • It reduces the amount of code (thus reducing the number of possible bugs);
  • It unifies the layout of web pages (e.g. it keeps the alignment of buttons and fields constant when navigating).

Additionally, if one wants to keep this dynamic form-generation method enhanced and updated, the enhancements are automatically applied to all generated pages. Pure automation!

Here’s an example

The simple example below illustrates my approach. This can serve as a good starting point for your own customized solution. The sample code generates New/Edit and View forms and JSON queries on servers using the corresponding input fields. Download demo here.

Note: The demo will not run in the Chrome browser because it will not load cross-domain content. Nonetheless, it works great in practically all other major browsers.

JS structure

form-generation-app.js

angular.module('app', []).config(function() { });

form-generation-controller.js

angular.module('app').controller('FormGenerationController', function ($scope) {

  // entity to edit
  $scope.entity = {
    name: 'Max',
    country: 2,
    licenceAgreement: true,
    description: 'I use AngularJS'
  };

  // fields description of entity
  $scope.fields = [
    {
      name: 'name',
      title: 'Name',
      required: true,
      type: {
        view: 'input'
      }
    },
    {
      name: 'country',
      title: 'Country',
      type: {
        view: 'select',
        options: [
          {id: 0, name: 'USA'},
          {id: 1, name: 'German'},
          {id: 2, name: 'Russia'}
        ]
      }
    },
    {
      name: 'licenceAgreement',
      title: 'Licence Agreement',
      type: {
        view: 'checkbox'
      }
    },
    {
      name: 'description',
      title: 'Description',
      type: {
        view: 'textarea'
      }
    }
  ];

});

HTML structure

index.html

<body ng-app="app" ng-controller="FormGenerationController">

  <h1>Edit/New mode:</h1>
  <div ng-repeat="field in fields">
    <ng-include src="'html/edit-field.html'"/>
  </div>

  <div>
    <h1>Your entity JSON:</h1>
    {{ entity }}
  </div>

  <h1>View mode:</h1>
  <div ng-repeat="field in fields">
    <ng-include src="'html/view-field.html'"/>
  </div>

</body>

edit-field.html

<!--also suitable for creation-->
<label>{{ field.title }}<em ng-hide="!field.required">*</em> :</label>
<span ng-switch on="field.type.view">
  <span ng-switch-when="input">
    <input
              ng-model="entity[field.name]"
              type="text"
              />
  </span>
  <span ng-switch-when="checkbox">
      <input
              ng-model="entity[field.name]"
              ng-checked="entity[field.name]"
              type="checkbox"
              />
  </span>
  <span ng-switch-when="textarea">
    <textarea
            ng-model="entity[field.name]"
            ></textarea>
  </span>
  <span ng-switch-when="select">
    <select
            ng-model="entity[field.name]"
            ng-options="item.id as item.name for item in field.type.options"
            ></select>
  </span>
  <!--You can add more custom widget types needed for your project-->
  <span ng-switch-default>
      <span>Unknown widget</span>
  </span>
</span>

view-field.html

<label>{{ field.title }}:</label>
<span ng-switch on="field.type.view">
  <span ng-switch-when="input">
    {{ entity[field.name] }}
  </span>
  <span ng-switch-when="checkbox">
      <input
              ng-model="entity[field.name]"
              ng-checked="entity[field.name]"
              ng-disabled="true"
              type="checkbox"
              />
  </span>
  <span ng-switch-when="textarea">
    {{ entity[field.name] }}
  </span>
  <span ng-switch-when="select">
       {{ field.type.options[entity[field.name]].name }}
  </span>
  <!--You can add more custom widget types needed for your project-->
  <span ng-switch-default>
      <span>Unknown widget</span>
  </span>
</span>
VN:F [1.9.22_1171]
Rating: 4.3/5 (73 votes cast)
VN:F [1.9.22_1171]
Rating: +14 (from 34 votes)
Creating Dynamic Web Forms Using AngularJS, 4.3 out of 5 based on 73 ratings



Request a Free Quote
 
 
 

Please enter the result and submit the form

Content created by Max Ryabchenko