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.

1. How to Build Dynamic Forms
in Angular Directive with a Backend
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.
www.backand.com

2. 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:
www.backand.com
The ‘js’ for the ‘input’ directive is:
With the partial for the HTML, where we use Bootstrap:

3. 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.
www.backand.com
Contact Information
Backand Inc.
info@backand.com
www.backand.com