Skip to main content
UploadLanguage (EN)Support
BusinessMobileSocial MediaMarketingTechnologyArt & PhotosCareerDesignEducationPresentations & Public SpeakingGovernment & NonprofitHealthcareInternetLawLeadership & ManagementAutomotiveEngineeringSoftwareRecruiting & HRRetailSalesServicesScienceSmall Business & EntrepreneurshipFoodEnvironmentEconomy & FinanceData & AnalyticsInvestor RelationsSportsSpiritualNews & PoliticsTravelSelf ImprovementReal EstateEntertainment & HumorHealth & MedicineDevices & HardwareLifestyle
Backand Cohen, profile picture
Uploaded byBackand Cohen
562 views

How to Build Dynamic Forms in Angular Directive with a Backend

This document outlines how to build dynamic forms using Angular and a backend, specifically utilizing Backand's REST API for configuration and data fetching. It details the creation of modular directives for form fields, validation parameters, and the dynamic generation of forms with two-way data binding. The article concludes with a call to action encouraging readers to start building their Angular applications with Backand.

Technology◦
Download to read offline
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
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:
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