Drag and drop to build bootstrap forms in AngularJS.
Clone or download
Latest commit 521099b Feb 2, 2018
Failed to load latest commit information.
components replaced col-md as col-sm Jul 16, 2014
dist Fixed tests. Feb 3, 2018
example replaced col-md as col-sm Jul 16, 2014
src support popover placement. #38 Jul 17, 2014
test Fixed tests. Feb 3, 2018
.editorconfig Fixed tests. Feb 3, 2018
.gitignore Fixed tests. Feb 3, 2018
.travis.yml Fixed tests. Feb 3, 2018
Gruntfile.coffee Fixed tests. Feb 3, 2018
LICENSE Fixed tests. Feb 3, 2018
README.md Fixed readme. Feb 3, 2018
index.html Fixed index.html Feb 3, 2018
package.json Fixed tests. Feb 3, 2018


angular-form-builder Build Status devDependency Status

MIT License

This is an AngularJS form builder written in CoffeeScript.


  1. AngularJS 1.2.32
  2. jQuery 3.3.1
  3. Bootstrap 3
  4. angular-validator


# just $builder
angular.module 'yourApp', ['builder']

# include $builder and default components
angular.module 'yourApp', ['builder', 'builder.components']


All components.
$builder.components =
    componentName{string}: component{object}


All groups of components.
$builder.groups = [componentGroup{string}]


# .config
$builderProvider.registerComponent = (name, component={}) ->
    Register the component for form-builder.
    @param name: The component name.
    @param component: The component object.
        group: {string} The component group.
        label: {string} The label of the input.
        description: {string} The description of the input.
        placeholder: {string} The placeholder of the input.
        editable: {bool} Is the form object editable?
        required: {bool} Is the form object required?
        validation: {string} angular-validator. "/regex/" or "[rule1, rule2]". (default is '/.*/')
        validationOptions: {array} [{rule: angular-validator, label: 'option label'}] the options for the validation. (default is [])
        options: {array} The input options.
        arrayToText: {bool} checkbox could use this to convert input (default is no)
        template: {string} html template
        templateUrl: {string} The url of the template.
        popoverTemplate: {string} html template
        popoverTemplateUrl: {string} The url of the popover template.
# .run
$builder.registerComponent = (name, component={}) ->


<div class="form-group">
    <label for="{{name+index}}" class="col-md-4 control-label" ng-class="{'fb-required':required}">{{label}}</label>
    <div class="col-md-8">
        <input type="text" ng-model="inputText" validator-required="{{required}}" id="{{name+index}}" class="form-control" placeholder="{{placeholder}}"/>
        <p class='help-block'>{{description}}</p>


    <div class="form-group">
        <label class='control-label'>Label</label>
        <input type='text' ng-model="label" validator="[required]" class='form-control'/>
    <div class="form-group">
        <label class='control-label'>Description</label>
        <input type='text' ng-model="description" class='form-control'/>
    <div class="form-group">
        <label class='control-label'>Placeholder</label>
        <input type='text' ng-model="placeholder" class='form-control'/>
    <div class="checkbox">
            <input type='checkbox' ng-model="required" />
    <div class="form-group" ng-if="validationOptions.length > 0">
        <label class='control-label'>Validation</label>
        <select ng-model="$parent.validation" class='form-control' ng-options="option.rule as option.label for option in validationOptions"></select>
    <div class='form-group'>
        <input type='submit' ng-click="popover.save($event)" class='btn btn-primary' value='Save'/>
        <input type='button' ng-click="popover.cancel($event)" class='btn btn-default' value='Cancel'/>
        <input type='button' ng-click="popover.remove($event)" class='btn btn-danger' value='Delete'/>


builder mode: `fb-builder` you could drag and drop to build the form.
form mode: `fb-form` this is the form for end-user to input value.
Default is {default: []}
$builder.forms =
    formName{string}: formObjects{array}


$builder.insertFormObject = (name, index, formObject={}) =>
    Insert the form object into the form at {index}.
    @param name: The form name.
    @param index: The form object index.
    @param form: The form object.
        id: The form object id.
        component: {string} The component name
        editable: {bool} Is the form object editable? (default is yes)
        label: {string} The form object label.
        description: {string} The form object description.
        placeholder: {string} The form object placeholder.
        options: {array} The form object options.
        required: {bool} Is the form object required? (default is no)
        validation: {string} angular-validator. "/regex/" or "[rule1, rule2]".
        [index]: {int} The form object index. It will be generated by $builder.
    @return: The form object.


$builder.addFormObject = (name, formObject={}) =>
    Insert the form object into the form at last.
    reference $builder.insertFormObject()


$builder.removeFormObject = (name, index) =>
    Remove the form object by the index.
    @param name: {string} The form name.
    @param index: {int} The form object index.



a = angular.module 'builder.directive', ['builder.provider', 'builder.controller', 'builder.drag', 'validator']
fbComponents = ->
    You could use `fb-components` to render the components view.
    restrict: 'A'
        <ul ng-if="groups.length > 1" class="nav nav-tabs nav-justified">
            <li ng-repeat="group in groups" ng-class="{active:activeGroup==group}">
                <a href='#' ng-click="selectGroup($event, group)">{{group}}</a>
        <div class='form-horizontal'>
            <div class='fb-component' ng-repeat="component in components"
    controller: 'fbComponentsController'
a.directive 'fbComponents', fbComponents
<div fb-components></div>


a = angular.module 'builder.directive', ['builder.provider', 'builder.controller', 'builder.drag', 'validator']
fbBuilder = ($injector) ->
    You could use `fb-builder="formName"` to render the builder view.
    restrict: 'A'
        <div class='form-horizontal'>
            <div class='fb-form-object-editable' ng-repeat="object in formObjects"
    link: (scope, element, attrs) ->
fbBuilder.$inject = ['$injector']
a.directive 'fbBuilder', fbBuilder
<div fb-builder="default"></div>


a = angular.module 'builder.directive', ['builder.provider', 'builder.controller', 'builder.drag', 'validator']
fbForm = ($injector) ->
    You could use `fb-form="formName"` to render the form view for end-users.
    restrict: 'A'
    require: 'ngModel'  # form data (end-user input value)
        # input model for scops in ng-repeat
        input: '=ngModel'
        <div class='fb-form-object' ng-repeat="object in form" fb-form-object="object">
    controller: 'fbFormController'
    link: (scope, element, attrs) ->
fbForm.$inject = ['$injector']
a.directive 'fbForm', fbForm
<form class="form-horizontal">
    <div ng-model="input" fb-form="default" fb-default="defaultValue"></div>
    <div class="form-group">
        <div class="col-md-8 col-md-offset-4">
            <input type="submit" ng-click="submit()" class="btn btn-default"/>


There are some default components at this module. This module is not required.

  • textInput
  • textArea
  • checkbox
  • radio
  • select

Unit Test

$ npm test


# install node modules
$ npm install
# install bower components
$ bower install
# run the local server and the file watcher to compile CoffeeScript
$ grunt dev
# compile coffee script and minify
$ grunt build