<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>
