angular-form-builder 
This is an AngularJS form builder written in CoffeeScript.
Frameworks
- AngularJS 1.2.32
- jQuery 3.3.1
- Bootstrap 3
- angular-validator
$builder
# just $builder angular.module 'yourApp', ['builder'] # include $builder and default components angular.module 'yourApp', ['builder', 'builder.components']components
### All components. ### $builder.components = componentName{string}: component{object}groups
### All groups of components. ### $builder.groups = [componentGroup{string}]registerComponent
# .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={}) ->component.template
<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> </div>component.popoverTemplate
<form> <div class="form-group"> <label class='control-label'>Label</label> <input type='text' ng-model="label" validator="[required]" class='form-control'/> </div> <div class="form-group"> <label class='control-label'>Description</label> <input type='text' ng-model="description" class='form-control'/> </div> <div class="form-group"> <label class='control-label'>Placeholder</label> <input type='text' ng-model="placeholder" class='form-control'/> </div> <div class="checkbox"> <label> <input type='checkbox' ng-model="required" /> Required</label> </div> <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> <hr/> <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'/> </div> </form>forms
### 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}insertFormObject
$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. ###addFormObject
$builder.addFormObject = (name, formObject={}) => ### Insert the form object into the form at last. reference $builder.insertFormObject() ###removeFormObject
$builder.removeFormObject = (name, index) => ### Remove the form object by the index. @param name: {string} The form name. @param index: {int} The form object index. ###builder.directive
fb-components
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' template: """ <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> </li> </ul> <div class='form-horizontal'> <div class='fb-component' ng-repeat="component in components" fb-component="component"></div> </div> """ controller: 'fbComponentsController' a.directive 'fbComponents', fbComponents<div fb-components></div>fb-builder
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' template: """ <div class='form-horizontal'> <div class='fb-form-object-editable' ng-repeat="object in formObjects" fb-form-object-editable="object"></div> </div> """ link: (scope, element, attrs) -> fbBuilder.$inject = ['$injector'] a.directive 'fbBuilder', fbBuilder<div fb-builder="default"></div>fb-form
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) scope: # input model for scops in ng-repeat input: '=ngModel' template: """ <div class='fb-form-object' ng-repeat="object in form" fb-form-object="object"> </div> """ 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"/> </div> </div> </form>builder.components
There are some default components at this module. This module is not required.
- textInput
- textArea
- checkbox
- radio
- select
Unit Test
$ npm testDevelopment
# 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
