"form bilder 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/travist/pen/xVyMjo?q=formBuilder&limit=all&type=type-pens" /> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'><link rel='stylesheet prefetch' href='https://unpkg.com/bootswatch@3.3.7/yeti/bootstrap.min.css'><link rel='stylesheet prefetch' href='https://cdn.rawgit.com/odra/ng-json-explorer/master/dist/angular-json-explorer.min.css'><link rel='stylesheet prefetch' href='https://unpkg.com/ng-formio-builder@latest/dist/ngFormBuilder-complete.css'> <style class="cp-pen-styles">.formbuilder { height: 600px; } .formcomponents { width: 30%; } .formarea { width: 70%; } .component-settings .nav-link { font-size: 0.6em; } .jsonviewer { max-height: 600px; overflow: scroll; } .form-type-select { display: inline-block; width: 100px; height: 28px; vertical-align: top; }</style></head><body> <div class="jumbotron" style="padding-top: 20px; padding-bottom: 10px;"> <div class="container text-center"> <p><img src="http://code-maven.com/img/angularjs.png" /></p> <h1>Form <a href="https://github.com/formio/ngFormBuilder" target="_blank">Builder</a> & <a href="https://github.com/formio/ngFormio" target="_blank">Renderer</a></h1> <p><strong>Open Source</strong> by <a target="_blank" href="https://form.io"><img src="https://help.form.io/assets/formio-logo.png" /></a></p> </div> </div> <div class="page-content" ng-app="formioApp"> <div class="container-fluid"> <div> <div class="row"> <div class="col-sm-8"> <h3 class="text-center text-muted">The <a href="https://github.com/formio/ngFormBuilder" target="_blank">Form Builder</a> allows you to build a <select class="form-control form-type-select" ng-model="form.display" ng-options="display.name as display.title for display in displays"></select></h3> <pre class="text-center bg-info"><h4><code><form-builder form="form"></form-builder></code></h4></pre> <div class="well" style="background-color: #fdfdfd;"> <form-builder form="form"></form-builder> </div> </div> <div class="col-sm-4"> <h3 class="text-center text-muted">as JSON Schema</h3> <pre class="bg-info"><h4><code>$rootScope.form = </code></h4></pre> <div class="well jsonviewer"> <json-explorer data="form" collapsed="jsonCollapsed"></json-explorer> </div> </div> </div> <div class="row"> <div class="col-sm-8 col-sm-offset-2"> <h3 class="text-center text-muted">which <a href="https://github.com/formio/ngFormio" target="_blank">Renders as a Form</a> in your Application</h3> <pre class="text-center bg-info"><h4><code><formio form="form"></formio></code></h4></pre> <div class="well"> <formio form="form" ng-if="renderForm"></formio> </div> </div> <div class="clearfix"></div> </div> <div class="row"> <div class="col-sm-10 col-sm-offset-1 text-center"> <h3 class="text-center text-muted">which connects to our API Platform</h3> <p>hosted or on-premise</p> <a href="https://form.io" target="_blank"><img style="width:100%" src="https://raw.githubusercontent.com/formio/help.form.io/gh-pages/assets/img/formioapi2.png" /></a> </div> </div> <div class="row" style="margin-top: 40px;"> <div class="col-sm-12 text-center"> <a href="https://form.io" target="_blank" class="btn btn-lg btn-success">Get Started</a> </div> </div> <div class="row well" style="margin-top: 50px;"> <div class="container"> <div class="row"> <div class="col-lg-12 text-center"> <h2 class="section-heading">We are Open Source!</h2> <h3 class="section-subheading text-muted">We are proud to offer our core Form & API platform as Open Source.</h3> <h3 class="section-subheading text-muted">Find us on GitHub @ <a href="https://github.com/formio/formio" target="_blank">https://github.com/formio/formio</a></h3> </div> </div> <div class="row"> <div class="col-md-4"><a href="https://github.com/formio/formio" target="_blank"><img class="img-responsive" src="https://form.io/assets/images/github-logo.png"></a></div> <div class="col-md-8"> <p>Getting started is as easy as...</p> <pre style="background-color: white;">git clone https://github.com/formio/formio.git cd formio npm install node server</pre> </div> </div> </div> </div> </div> </div> <a href="https://github.com/formio/formio" target="_blank"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/e7bbb0521b397edbd5fe43e7f760759336b5e05f/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677265656e5f3030373230302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png"></a> </div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdn.ckeditor.com/4.5.11/standard/ckeditor.js'></script><script src='https://unpkg.com/signature_pad@1.5.3/signature_pad.min.js'></script><script src='https://unpkg.com/ng-formio-builder@latest/dist/ngFormBuilder-full.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js'></script><script src='https://cdn.rawgit.com/odra/ng-json-explorer/master/dist/angular-json-explorer.min.js'></script> <script >angular .module("formioApp", ["ui.bootstrap", "ui.select", "formio", "ngFormBuilder", "ngJsonExplorer"]) .run([ "$rootScope", 'formioComponents', '$timeout', function( $rootScope, formioComponents, $timeout ) { $rootScope.displays = [{ name: 'form', title: 'Form' }, { name: 'wizard', title: 'Wizard' }]; $rootScope.form = { components: [{ "input": true, "tableView": true, "inputType": "text", "inputMask": "", "label": "First Name", "key": "firstName", "placeholder": "Enter your first name", "prefix": "", "suffix": "", "multiple": false, "defaultValue": "", "protected": false, "unique": false, "persistent": true, "validate": { "required": false, "minLength": "", "maxLength": "", "pattern": "", "custom": "", "customPrivate": false }, "conditional": { "show": false, "when": null, "eq": "" }, "type": "textfield" }, { "input": true, "tableView": true, "inputType": "text", "inputMask": "", "label": "Last Name", "key": "lastName", "placeholder": "Enter your last name", "prefix": "", "suffix": "", "multiple": false, "defaultValue": "", "protected": false, "unique": false, "persistent": true, "validate": { "required": false, "minLength": "", "maxLength": "", "pattern": "", "custom": "", "customPrivate": false }, "conditional": { "show": false, "when": null, "eq": "" }, "type": "textfield" }, { "input": true, "tableView": true, "label": "Message", "key": "message", "placeholder": "What do you think?", "prefix": "", "suffix": "", "rows": 3, "multiple": false, "defaultValue": "", "protected": false, "persistent": true, "validate": { "required": false, "minLength": "", "maxLength": "", "pattern": "", "custom": "" }, "type": "textarea", "conditional": { "show": false, "when": null, "eq": "" } }, { type: 'button', theme: 'primary', disableOnInvalid: true, action: 'submit', block: false, rightIcon: '', leftIcon: '', size: 'md', key: 'submit', tableView: false, label: 'Submit', input: true }], display: 'form' }; $rootScope.renderForm = true; $rootScope.$on('formUpdate', function(event, form) { angular.merge($rootScope.form, form); $rootScope.renderForm = false; setTimeout(function() { $rootScope.renderForm = true; }, 10); }); var originalComps = _.cloneDeep($rootScope.form.components); originalComps.push(angular.copy(formioComponents.components.button.settings)); $rootScope.jsonCollapsed = true; $timeout(function() { $rootScope.jsonCollapsed = false; }, 200); var currentDisplay = 'form'; $rootScope.$watch('form.display', function(display) { if (display && (display !== currentDisplay)) { currentDisplay = display; if (display === 'form') { $rootScope.form.components = originalComps; } else { $rootScope.form.components = [{ type: 'panel', input: false, title: 'Page 1', theme: 'default', components: originalComps }]; } } }); } ]); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: