https://github.com/kelp404/angular-form-builder
Drag and drop to build bootstrap forms in AngularJS.
https://github.com/kelp404/angular-form-builder
angularjs
Last synced: 3 months ago
JSON representation
Drag and drop to build bootstrap forms in AngularJS.
- Host: GitHub
- URL: https://github.com/kelp404/angular-form-builder
- Owner: kelp404
- License: mit
- Created: 2013-11-06T15:42:33.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2018-06-13T05:17:20.000Z (about 7 years ago)
- Last Synced: 2025-04-11T15:27:42.899Z (3 months ago)
- Topics: angularjs
- Language: CoffeeScript
- Homepage: http://kelp404.github.io/angular-form-builder/
- Size: 389 KB
- Stars: 601
- Watchers: 60
- Forks: 336
- Open Issues: 60
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# angular-form-builder [](http://travis-ci.org/kelp404/angular-form-builder) [](https://david-dm.org/kelp404/angular-form-builder#info=devDependencies&view=table)
[MIT License](http://www.opensource.org/licenses/mit-license.php)
This is an AngularJS form builder written in [CoffeeScript](http://coffeescript.org).
## Frameworks
1. [AngularJS](http://angularjs.org/) 1.2.32
2. [jQuery](http://jquery.com/) 3.3.1
3. [Bootstrap 3](http://getbootstrap.com/)
4. [angular-validator](https://github.com/kelp404/angular-validator)
## $builder
```coffee
# just $builder
angular.module 'yourApp', ['builder']
# include $builder and default components
angular.module 'yourApp', ['builder', 'builder.components']
```
#### components
```coffee
###
All components.
###
$builder.components =
componentName{string}: component{object}
```
#### groups
```coffee
###
All groups of components.
###
$builder.groups = [componentGroup{string}]
```
#### registerComponent
```coffee
# .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**
```html
{{label}}
{{description}}
```
**component.popoverTemplate**
```html
Label
Description
Placeholder
Required
Validation
```
#### forms
```coffee
###
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
```coffee
$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
```coffee
$builder.addFormObject = (name, formObject={}) =>
###
Insert the form object into the form at last.
reference $builder.insertFormObject()
###
```
#### removeFormObject
```coffee
$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
```coffee
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:
"""
"""
controller: 'fbComponentsController'
a.directive 'fbComponents', fbComponents
```
```html
```
#### fb-builder
```coffee
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:
"""
"""
link: (scope, element, attrs) ->
fbBuilder.$inject = ['$injector']
a.directive 'fbBuilder', fbBuilder
```
```html
```
#### fb-form
```coffee
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:
"""
"""
controller: 'fbFormController'
link: (scope, element, attrs) ->
fbForm.$inject = ['$injector']
a.directive 'fbForm', fbForm
```
```html
```
## builder.components
> There are some default components at this module. This module is not required.
+ textInput
+ textArea
+ checkbox
+ radio
+ select
## Unit Test
```bash
$ npm test
```
## Development
```bash
# install node modules
$ npm install
# install bower components
$ bower install
```
```bash
# run the local server and the file watcher to compile CoffeeScript
$ grunt dev
# compile coffee script and minify
$ grunt build
```