{"id":14973157,"url":"https://github.com/kelp404/angular-form-builder","last_synced_at":"2025-04-12T15:32:24.669Z","repository":{"id":57741666,"uuid":"14176890","full_name":"kelp404/angular-form-builder","owner":"kelp404","description":"Drag and drop to build bootstrap forms in AngularJS.","archived":false,"fork":false,"pushed_at":"2018-06-13T05:17:20.000Z","size":398,"stargazers_count":601,"open_issues_count":60,"forks_count":336,"subscribers_count":60,"default_branch":"master","last_synced_at":"2025-04-11T15:27:42.899Z","etag":null,"topics":["angularjs"],"latest_commit_sha":null,"homepage":"http://kelp404.github.io/angular-form-builder/","language":"CoffeeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kelp404.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-11-06T15:42:33.000Z","updated_at":"2024-10-28T23:57:36.000Z","dependencies_parsed_at":"2022-08-29T07:13:21.271Z","dependency_job_id":null,"html_url":"https://github.com/kelp404/angular-form-builder","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kelp404%2Fangular-form-builder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kelp404%2Fangular-form-builder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kelp404%2Fangular-form-builder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kelp404%2Fangular-form-builder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kelp404","download_url":"https://codeload.github.com/kelp404/angular-form-builder/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248430552,"owners_count":21102034,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angularjs"],"created_at":"2024-09-24T13:48:14.328Z","updated_at":"2025-04-12T15:32:24.645Z","avatar_url":"https://github.com/kelp404.png","language":"CoffeeScript","readme":"# angular-form-builder [![Build Status](https://secure.travis-ci.org/kelp404/angular-form-builder.png?branch=master)](http://travis-ci.org/kelp404/angular-form-builder) [![devDependency Status](https://david-dm.org/kelp404/angular-form-builder/dev-status.png?branch=master)](https://david-dm.org/kelp404/angular-form-builder#info=devDependencies\u0026view=table)\n\n[MIT License](http://www.opensource.org/licenses/mit-license.php)\n\n\nThis is an AngularJS form builder written in [CoffeeScript](http://coffeescript.org).\n\n\n\n\n## Frameworks\n1. [AngularJS](http://angularjs.org/) 1.2.32\n2. [jQuery](http://jquery.com/) 3.3.1\n3. [Bootstrap 3](http://getbootstrap.com/)\n4. [angular-validator](https://github.com/kelp404/angular-validator)\n\n\n\n\n## $builder\n```coffee\n# just $builder\nangular.module 'yourApp', ['builder']\n\n# include $builder and default components\nangular.module 'yourApp', ['builder', 'builder.components']\n```\n\n\n#### components\n```coffee\n###\nAll components.\n###\n$builder.components =\n    componentName{string}: component{object}\n```\n\n\n#### groups\n```coffee\n###\nAll groups of components.\n###\n$builder.groups = [componentGroup{string}]\n```\n\n\n#### registerComponent\n```coffee\n# .config\n$builderProvider.registerComponent = (name, component={}) -\u003e\n    ###\n    Register the component for form-builder.\n    @param name: The component name.\n    @param component: The component object.\n        group: {string} The component group.\n        label: {string} The label of the input.\n        description: {string} The description of the input.\n        placeholder: {string} The placeholder of the input.\n        editable: {bool} Is the form object editable?\n        required: {bool} Is the form object required?\n        validation: {string} angular-validator. \"/regex/\" or \"[rule1, rule2]\". (default is '/.*/')\n        validationOptions: {array} [{rule: angular-validator, label: 'option label'}] the options for the validation. (default is [])\n        options: {array} The input options.\n        arrayToText: {bool} checkbox could use this to convert input (default is no)\n        template: {string} html template\n        templateUrl: {string} The url of the template.\n        popoverTemplate: {string} html template\n        popoverTemplateUrl: {string} The url of the popover template.\n    ###\n# .run\n$builder.registerComponent = (name, component={}) -\u003e\n```\n\n**component.template**\n```html\n\u003cdiv class=\"form-group\"\u003e\n    \u003clabel for=\"{{name+index}}\" class=\"col-md-4 control-label\" ng-class=\"{'fb-required':required}\"\u003e{{label}}\u003c/label\u003e\n    \u003cdiv class=\"col-md-8\"\u003e\n        \u003cinput type=\"text\" ng-model=\"inputText\" validator-required=\"{{required}}\" id=\"{{name+index}}\" class=\"form-control\" placeholder=\"{{placeholder}}\"/\u003e\n        \u003cp class='help-block'\u003e{{description}}\u003c/p\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n**component.popoverTemplate**\n```html\n\u003cform\u003e\n    \u003cdiv class=\"form-group\"\u003e\n        \u003clabel class='control-label'\u003eLabel\u003c/label\u003e\n        \u003cinput type='text' ng-model=\"label\" validator=\"[required]\" class='form-control'/\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"form-group\"\u003e\n        \u003clabel class='control-label'\u003eDescription\u003c/label\u003e\n        \u003cinput type='text' ng-model=\"description\" class='form-control'/\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"form-group\"\u003e\n        \u003clabel class='control-label'\u003ePlaceholder\u003c/label\u003e\n        \u003cinput type='text' ng-model=\"placeholder\" class='form-control'/\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"checkbox\"\u003e\n        \u003clabel\u003e\n            \u003cinput type='checkbox' ng-model=\"required\" /\u003e\n            Required\u003c/label\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"form-group\" ng-if=\"validationOptions.length \u003e 0\"\u003e\n        \u003clabel class='control-label'\u003eValidation\u003c/label\u003e\n        \u003cselect ng-model=\"$parent.validation\" class='form-control' ng-options=\"option.rule as option.label for option in validationOptions\"\u003e\u003c/select\u003e\n    \u003c/div\u003e\n    \u003chr/\u003e\n    \u003cdiv class='form-group'\u003e\n        \u003cinput type='submit' ng-click=\"popover.save($event)\" class='btn btn-primary' value='Save'/\u003e\n        \u003cinput type='button' ng-click=\"popover.cancel($event)\" class='btn btn-default' value='Cancel'/\u003e\n        \u003cinput type='button' ng-click=\"popover.remove($event)\" class='btn btn-danger' value='Delete'/\u003e\n    \u003c/div\u003e\n\u003c/form\u003e\n```\n\n\n#### forms\n```coffee\n###\nbuilder mode: `fb-builder` you could drag and drop to build the form.\nform mode: `fb-form` this is the form for end-user to input value.\nDefault is {default: []}\n###\n$builder.forms =\n    formName{string}: formObjects{array}\n```\n\n\n#### insertFormObject\n```coffee\n$builder.insertFormObject = (name, index, formObject={}) =\u003e\n    ###\n    Insert the form object into the form at {index}.\n    @param name: The form name.\n    @param index: The form object index.\n    @param form: The form object.\n        id: The form object id.\n        component: {string} The component name\n        editable: {bool} Is the form object editable? (default is yes)\n        label: {string} The form object label.\n        description: {string} The form object description.\n        placeholder: {string} The form object placeholder.\n        options: {array} The form object options.\n        required: {bool} Is the form object required? (default is no)\n        validation: {string} angular-validator. \"/regex/\" or \"[rule1, rule2]\".\n        [index]: {int} The form object index. It will be generated by $builder.\n    @return: The form object.\n    ###\n```\n\n#### addFormObject\n```coffee\n$builder.addFormObject = (name, formObject={}) =\u003e\n    ###\n    Insert the form object into the form at last.\n    reference $builder.insertFormObject()\n    ###\n```\n\n#### removeFormObject\n```coffee\n$builder.removeFormObject = (name, index) =\u003e\n    ###\n    Remove the form object by the index.\n    @param name: {string} The form name.\n    @param index: {int} The form object index.\n    ###\n```\n\n\n\n\n## builder.directive\n#### fb-components\n```coffee\na = angular.module 'builder.directive', ['builder.provider', 'builder.controller', 'builder.drag', 'validator']\nfbComponents = -\u003e\n    ###\n    You could use `fb-components` to render the components view.\n    ###\n    restrict: 'A'\n    template:\n        \"\"\"\n        \u003cul ng-if=\"groups.length \u003e 1\" class=\"nav nav-tabs nav-justified\"\u003e\n            \u003cli ng-repeat=\"group in groups\" ng-class=\"{active:activeGroup==group}\"\u003e\n                \u003ca href='#' ng-click=\"selectGroup($event, group)\"\u003e{{group}}\u003c/a\u003e\n            \u003c/li\u003e\n        \u003c/ul\u003e\n        \u003cdiv class='form-horizontal'\u003e\n            \u003cdiv class='fb-component' ng-repeat=\"component in components\"\n                fb-component=\"component\"\u003e\u003c/div\u003e\n        \u003c/div\u003e\n        \"\"\"\n    controller: 'fbComponentsController'\na.directive 'fbComponents', fbComponents\n```\n\n```html\n\u003cdiv fb-components\u003e\u003c/div\u003e\n```\n\n\n#### fb-builder\n```coffee\na = angular.module 'builder.directive', ['builder.provider', 'builder.controller', 'builder.drag', 'validator']\nfbBuilder = ($injector) -\u003e\n    ###\n    You could use `fb-builder=\"formName\"` to render the builder view.\n    ###\n    restrict: 'A'\n    template:\n        \"\"\"\n        \u003cdiv class='form-horizontal'\u003e\n            \u003cdiv class='fb-form-object-editable' ng-repeat=\"object in formObjects\"\n                fb-form-object-editable=\"object\"\u003e\u003c/div\u003e\n        \u003c/div\u003e\n        \"\"\"\n    link: (scope, element, attrs) -\u003e\nfbBuilder.$inject = ['$injector']\na.directive 'fbBuilder', fbBuilder\n```\n\n```html\n\u003cdiv fb-builder=\"default\"\u003e\u003c/div\u003e\n```\n\n\n#### fb-form\n```coffee\na = angular.module 'builder.directive', ['builder.provider', 'builder.controller', 'builder.drag', 'validator']\nfbForm = ($injector) -\u003e\n    ###\n    You could use `fb-form=\"formName\"` to render the form view for end-users.\n    ###\n    restrict: 'A'\n    require: 'ngModel'  # form data (end-user input value)\n    scope:\n        # input model for scops in ng-repeat\n        input: '=ngModel'\n    template:\n        \"\"\"\n        \u003cdiv class='fb-form-object' ng-repeat=\"object in form\" fb-form-object=\"object\"\u003e\n        \u003c/div\u003e\n        \"\"\"\n    controller: 'fbFormController'\n    link: (scope, element, attrs) -\u003e\nfbForm.$inject = ['$injector']\na.directive 'fbForm', fbForm\n```\n\n```html\n\u003cform class=\"form-horizontal\"\u003e\n    \u003cdiv ng-model=\"input\" fb-form=\"default\" fb-default=\"defaultValue\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"form-group\"\u003e\n        \u003cdiv class=\"col-md-8 col-md-offset-4\"\u003e\n            \u003cinput type=\"submit\" ng-click=\"submit()\" class=\"btn btn-default\"/\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/form\u003e\n```\n\n\n\n\n## builder.components\n\u003e There are some default components at this module. This module is not required.\n+ textInput\n+ textArea\n+ checkbox\n+ radio\n+ select\n\n\n\n\n## Unit Test\n```bash\n$ npm test\n```\n\n\n\n\n## Development\n```bash\n# install node modules\n$ npm install\n# install bower components\n$ bower install\n```\n```bash\n# run the local server and the file watcher to compile CoffeeScript\n$ grunt dev\n# compile coffee script and minify\n$ grunt build\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkelp404%2Fangular-form-builder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkelp404%2Fangular-form-builder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkelp404%2Fangular-form-builder/lists"}