"form builder angular"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html lang='en' class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/ericphan/pen/weoXJm?limit=all&page=22&q=Form+Builder" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css'><link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'><link rel='stylesheet prefetch' href='https://kelp404.github.io/angular-form-builder/dist/angular-form-builder.css'> <style class="cp-pen-styles">body{padding:10px}.footer{height:50px}</style></head><body> <div ng-app="app" ng-controller="DemoController"> <div class="row"> <h1>angular-form-builder</h1> <hr/> <div class="col-md-6"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Builder</h3> </div> <div fb-builder="default"></div> <div class="panel-footer"> <div class="checkbox"> <label><input type="checkbox" ng-model="isShowScope" /> Show scope </label> </div> <pre ng-if="isShowScope">{{form}}</pre> </div> </div> </div> <div class="col-md-6"> <div fb-components></div> </div> </div> <div class="row"> <h2>Form</h2> <hr/> <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> <div class="checkbox"> <label><input type="checkbox" ng-model="isShowScope" ng-init="isShowScope=true" /> Show scope </label> </div> <pre ng-if="isShowScope">{{input}}</pre> </div> <div class="row"> <div class="col-md-12 footer"></div> </div> </div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js'></script><script src='https://code.angularjs.org/1.2.20/angular.min.js'></script><script src='https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css'></script><script src='https://kelp404.github.io/angular-form-builder/dist/angular-form-builder.js'></script><script src='https://kelp404.github.io/angular-validator/dist/angular-validator.min.js'></script><script src='https://kelp404.github.io/angular-validator/dist/angular-validator-rules.min.js'></script> <script >(function() { angular.module('builder.components', ['builder', 'validator.rules']).config([ '$builderProvider', function($builderProvider) { $builderProvider.registerComponent('returnCaption', { group: 'Default', label: 'Description', description: 'Return Caption', placeholder: 'Box Name', required: false, template: `<div class="form-group"> <label for="{{formName+index}}" class="col-sm-4 control-label" ng-class="{'fb-required':required}">{{label}}</label> <div class="col-sm-8"> <input type="text" ng-model="inputText" validator-required="{{required}}" validator-group="{{formName}}" id="{{formName+index}}" class="form-control" placeholder="{{placeholder}}"/> <p class='help-block'>{{description}}</p> </div> </div>`, }); $builderProvider.registerComponent('textInput', { group: 'Default', label: 'Text Input', description: 'description', placeholder: 'placeholder', required: false, validationOptions: [ { label: 'none', rule: '/.*/' }, { label: 'number', rule: '[number]' }, { label: 'email', rule: '[email]' }, { label: 'url', rule: '[url]' } ], template: "<div class=\"form-group\">\n <label for=\"{{formName+index}}\" class=\"col-sm-4 control-label\" ng-class=\"{'fb-required':required}\">{{label}}</label>\n <div class=\"col-sm-8\">\n <input type=\"text\" ng-model=\"inputText\" validator-required=\"{{required}}\" validator-group=\"{{formName}}\" id=\"{{formName+index}}\" class=\"form-control\" placeholder=\"{{placeholder}}\"/>\n <p class='help-block'>{{description}}</p>\n </div>\n</div>", popoverTemplate: "<form>\n <div class=\"form-group\">\n <label class='control-label'>Label</label>\n <input type='text' ng-model=\"label\" validator=\"[required]\" class='form-control'/>\n </div>\n <div class=\"form-group\">\n <label class='control-label'>Description</label>\n <input type='text' ng-model=\"description\" class='form-control'/>\n </div>\n <div class=\"form-group\">\n <label class='control-label'>Placeholder</label>\n <input type='text' ng-model=\"placeholder\" class='form-control'/>\n </div>\n <div class=\"checkbox\">\n <label>\n <input type='checkbox' ng-model=\"required\" />\n Required</label>\n </div>\n <div class=\"form-group\" ng-if=\"validationOptions.length > 0\">\n <label class='control-label'>Validation</label>\n <select ng-model=\"$parent.validation\" class='form-control' ng-options=\"option.rule as option.label for option in validationOptions\"></select>\n </div>\n\n <hr/>\n <div class='form-group'>\n <input type='submit' ng-click=\"popover.save($event)\" class='btn btn-primary' value='Save'/>\n <input type='button' ng-click=\"popover.cancel($event)\" class='btn btn-default' value='Cancel'/>\n <input type='button' ng-click=\"popover.remove($event)\" class='btn btn-danger' value='Delete'/>\n </div>\n</form>" }); $builderProvider.registerComponent('textArea', { group: 'Default', label: 'Text Area', description: 'description', placeholder: 'placeholder', required: false, template: "<div class=\"form-group\">\n <label for=\"{{formName+index}}\" class=\"col-sm-4 control-label\" ng-class=\"{'fb-required':required}\">{{label}}</label>\n <div class=\"col-sm-8\">\n <textarea type=\"text\" ng-model=\"inputText\" validator-required=\"{{required}}\" validator-group=\"{{formName}}\" id=\"{{formName+index}}\" class=\"form-control\" rows='6' placeholder=\"{{placeholder}}\"/>\n <p class='help-block'>{{description}}</p>\n </div>\n</div>", popoverTemplate: "<form>\n <div class=\"form-group\">\n <label class='control-label'>Label</label>\n <input type='text' ng-model=\"label\" validator=\"[required]\" class='form-control'/>\n </div>\n <div class=\"form-group\">\n <label class='control-label'>Description</label>\n <input type='text' ng-model=\"description\" class='form-control'/>\n </div>\n <div class=\"form-group\">\n <label class='control-label'>Placeholder</label>\n <input type='text' ng-model=\"placeholder\" class='form-control'/>\n </div>\n <div class=\"checkbox\">\n <label>\n <input type='checkbox' ng-model=\"required\" />\n Required</label>\n </div>\n\n <hr/>\n <div class='form-group'>\n <input type='submit' ng-click=\"popover.save($event)\" class='btn btn-primary' value='Save'/>\n <input type='button' ng-click=\"popover.cancel($event)\" class='btn btn-default' value='Cancel'/>\n <input type='button' ng-click=\"popover.remove($event)\" class='btn btn-danger' value='Delete'/>\n </div>\n</form>" }); $builderProvider.registerComponent('checkbox', { group: 'Default', label: 'Checkbox', description: 'description', placeholder: 'placeholder', required: false, options: ['value one', 'value two'], arrayToText: true, template: "<div class=\"form-group\">\n <label for=\"{{formName+index}}\" class=\"col-sm-4 control-label\" ng-class=\"{'fb-required':required}\">{{label}}</label>\n <div class=\"col-sm-8\">\n <input type='hidden' ng-model=\"inputText\" validator-required=\"{{required}}\" validator-group=\"{{formName}}\"/>\n <div class='checkbox' ng-repeat=\"item in options track by $index\">\n <label><input type='checkbox' ng-model=\"$parent.inputArray[$index]\" value='item'/>\n {{item}}\n </label>\n </div>\n <p class='help-block'>{{description}}</p>\n </div>\n</div>", popoverTemplate: "<form>\n <div class=\"form-group\">\n <label class='control-label'>Label</label>\n <input type='text' ng-model=\"label\" validator=\"[required]\" class='form-control'/>\n </div>\n <div class=\"form-group\">\n <label class='control-label'>Description</label>\n <input type='text' ng-model=\"description\" class='form-control'/>\n </div>\n <div class=\"form-group\">\n <label class='control-label'>Options</label>\n <textarea class=\"form-control\" rows=\"3\" ng-model=\"optionsText\"/>\n </div>\n <div class=\"checkbox\">\n <label>\n <input type='checkbox' ng-model=\"required\" />\n Required\n </label>\n </div>\n\n <hr/>\n <div class='form-group'>\n <input type='submit' ng-click=\"popover.save($event)\" class='btn btn-primary' value='Save'/>\n <input type='button' ng-click=\"popover.cancel($event)\" class='btn btn-default' value='Cancel'/>\n <input type='button' ng-click=\"popover.remove($event)\" class='btn btn-danger' value='Delete'/>\n </div>\n</form>" }); $builderProvider.registerComponent('radio', { group: 'Default', label: 'Radio', description: 'description', placeholder: 'placeholder', required: false, options: ['value one', 'value two'], template: "<div class=\"form-group\">\n <label for=\"{{formName+index}}\" class=\"col-sm-4 control-label\" ng-class=\"{'fb-required':required}\">{{label}}</label>\n <div class=\"col-sm-8\">\n <div class='radio' ng-repeat=\"item in options track by $index\">\n <label><input name='{{formName+index}}' ng-model=\"$parent.inputText\" validator-group=\"{{formName}}\" value='{{item}}' type='radio'/>\n {{item}}\n </label>\n </div>\n <p class='help-block'>{{description}}</p>\n </div>\n</div>", popoverTemplate: "<form>\n <div class=\"form-group\">\n <label class='control-label'>Label</label>\n <input type='text' ng-model=\"label\" validator=\"[required]\" class='form-control'/>\n </div>\n <div class=\"form-group\">\n <label class='control-label'>Description</label>\n <input type='text' ng-model=\"description\" class='form-control'/>\n </div>\n <div class=\"form-group\">\n <label class='control-label'>Options</label>\n <textarea class=\"form-control\" rows=\"3\" ng-model=\"optionsText\"/>\n </div>\n\n <hr/>\n <div class='form-group'>\n <input type='submit' ng-click=\"popover.save($event)\" class='btn btn-primary' value='Save'/>\n <input type='button' ng-click=\"popover.cancel($event)\" class='btn btn-default' value='Cancel'/>\n <input type='button' ng-click=\"popover.remove($event)\" class='btn btn-danger' value='Delete'/>\n </div>\n</form>" }); return $builderProvider.registerComponent('select', { group: 'Default', label: 'Select', description: 'description', placeholder: 'placeholder', required: false, options: ['value one', 'value two'], template: "<div class=\"form-group\">\n <label for=\"{{formName+index}}\" class=\"col-sm-4 control-label\">{{label}}</label>\n <div class=\"col-sm-8\">\n <select ng-options=\"value for value in options\" id=\"{{formName+index}}\" class=\"form-control\"\n ng-model=\"inputText\" ng-init=\"inputText = options[0]\"/>\n <p class='help-block'>{{description}}</p>\n </div>\n</div>", popoverTemplate: "<form>\n <div class=\"form-group\">\n <label class='control-label'>Label</label>\n <input type='text' ng-model=\"label\" validator=\"[required]\" class='form-control'/>\n </div>\n <div class=\"form-group\">\n <label class='control-label'>Description</label>\n <input type='text' ng-model=\"description\" class='form-control'/>\n </div>\n <div class=\"form-group\">\n <label class='control-label'>Options</label>\n <textarea class=\"form-control\" rows=\"3\" ng-model=\"optionsText\"/>\n </div>\n\n <hr/>\n <div class='form-group'>\n <input type='submit' ng-click=\"popover.save($event)\" class='btn btn-primary' value='Save'/>\n <input type='button' ng-click=\"popover.cancel($event)\" class='btn btn-default' value='Cancel'/>\n <input type='button' ng-click=\"popover.remove($event)\" class='btn btn-danger' value='Delete'/>\n </div>\n</form>" }); } ]); }).call(this); (function() { angular.module('app', ['builder', 'builder.components', 'validator.rules']).run([ '$builder', function($builder) { $builder.registerComponent('sampleInput', { group: 'from html', label: 'Sample', description: 'From html template', placeholder: 'placeholder', required: false, validationOptions: [ { label: 'none', rule: '/.*/' }, { label: 'number', rule: '[number]' }, { label: 'email', rule: '[email]' }, { label: 'url', rule: '[url]' } ], templateUrl: 'example/template.html', popoverTemplateUrl: 'example/popoverTemplate.html' }); return $builder.registerComponent('name', { group: 'Default', label: 'Name', required: false, arrayToText: true, template: "<div class=\"form-group\">\n <label for=\"{{formName+index}}\" class=\"col-md-4 control-label\" ng-class=\"{'fb-required':required}\">{{label}}</label>\n <div class=\"col-md-8\">\n <input type='hidden' ng-model=\"inputText\" validator-required=\"{{required}}\" validator-group=\"{{formName}}\"/>\n <div class=\"col-sm-6\" style=\"padding-left: 0;\">\n <input type=\"text\"\n ng-model=\"inputArray[0]\"\n class=\"form-control\" id=\"{{formName+index}}-0\"/>\n <p class='help-block'>First name</p>\n </div>\n <div class=\"col-sm-6\" style=\"padding-left: 0;\">\n <input type=\"text\"\n ng-model=\"inputArray[1]\"\n class=\"form-control\" id=\"{{formName+index}}-1\"/>\n <p class='help-block'>Last name</p>\n </div>\n </div>\n</div>", popoverTemplate: "<form>\n <div class=\"form-group\">\n <label class='control-label'>Label</label>\n <input type='text' ng-model=\"label\" validator=\"[required]\" class='form-control'/>\n </div>\n <div class=\"checkbox\">\n <label>\n <input type='checkbox' ng-model=\"required\" />\n Required\n </label>\n </div>\n\n <hr/>\n <div class='form-group'>\n <input type='submit' ng-click=\"popover.save($event)\" class='btn btn-primary' value='Save'/>\n <input type='button' ng-click=\"popover.cancel($event)\" class='btn btn-default' value='Cancel'/>\n <input type='button' ng-click=\"popover.remove($event)\" class='btn btn-danger' value='Delete'/>\n </div>\n</form>" }); } ]).controller('DemoController', [ '$scope', '$builder', '$validator', function($scope, $builder, $validator) { var checkbox, textbox; textbox = $builder.addFormObject('default', { id: 'textbox', component: 'name', label: 'Name', description: 'Your name', placeholder: 'Your name', required: true, editable: false }); checkbox = $builder.addFormObject('default', { id: 'checkbox', component: 'checkbox', label: 'Pets', description: 'Do you have any pets?', options: ['Dog', 'Cat'] }); $builder.addFormObject('default', { component: 'sampleInput' }); $scope.form = $builder.forms['default']; $scope.input = []; $scope.defaultValue = {}; $scope.defaultValue[textbox.id] = 'default value'; $scope.defaultValue[checkbox.id] = [true, true]; return $scope.submit = function() { return $validator.validate($scope, 'default').success(function() { return console.log('success'); }).error(function() { return console.log('error'); }); }; } ]); }).call(this); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: