Back to blog home page

How to Build Dynamic Forms in Angular Directive with a Backend

Posted by on Oct 02, 2014

In this blog we will demonstrate how to build dynamic forms in Angular with a backend, that in the end will return the configuration and data.  This code was created for anyone who needs to build a complex project with many forms.  To demonstrate the server side we will use Backand’s REST API in addition to referencing the full code in GitHub.

Quickly on Backand

Backand is a backend to an AngularJS front-end. With Backand you can connect to any database.  Once connected you can select tables and  easily configure the set of fields to be presented in each form (or grid), including types of fields, default values, whether a field is required, and additional constraints such as minimum and maximum values.

Dynamic Forms

A directive in Backand generates a form dynamically with a set of fields whose content is fetched when the screen is loaded. This causes the need to generate screens using ‘ng-repeat’ on the set of fields configured for the screen as fetched for the server.

Field Directives

To facilitate modular dynamic form construction, we defined a set of directives for the possible field type. Each directive comes with validation error messages that are configurable.

A directive has four parameters:

  1. Field – set of properties of the field, including: name, type, required, disabled, show/hide and optional: format, minimum value, maximum value, pattern
  2. Value – value of field, for an ‘input’ field will include the attribute ‘val’
  3. Errors – structure of validation error strings
  4. InputClass – for field styling using ‘ng-class’

In the HTML we use the directive as:

The ‘js’ for the ‘input’ directive is:

With the partial for the HTML, where we use Bootstrap:

The case of pattern and no pattern are distinguished because ‘ng-pattern’ will not work with an empty pattern.

In a controller using the directive, we assign the variables used as parameters of the directive:

Because we use ‘ng-model’, we have two-way data binding.

Dynamic Form Construction

Once we fetch the form configuration to the variable ‘fields’ and the pre-filled data into ‘values’, we use ‘ng-repeat’ to generate the various fields:

Other Directives

Similar and more complicated directives are defined using the same approach for numeric input, email, links, datepicker, and more. For the full details see the GitHub repository.

Build your Bootstrap + Angular app with Backand today. — Get started now.

  • Lars Jeppesen

    Impressive

  • Just what I was looking for! Thank you very much for sharing your approach. 🙂

  • Angelos Katsaris

    Nice post! You can also check this one.
    https://github.com/akat/dynforms

  • Rodney Barbati

    If you want to present a form or an HTML table that allows addition, deletion and updating without any custom code on the server, try the Tomato and Basil projects found on github at…

    https://rpbarbati.github.io/Tomato

    Using the Tomato project library, you can produce a table or form for any database table or view (or even a SQL SELECT statement) in as little as 3 lines of HTML only (inclusive – there is no custom code needed on the server other than the Tomato installation).

    Tomato (and the companion project Basil, which provides the dynamic forms and tables) also allows you to inject custom HTML into a dynamic form easily in order to handle whatever you need to handle. It also allows you to override the default field types which are generated from the database schema itself.

    Try it – and contact me with questions!