') + ')', 'gi'); if (regex.test(text)) { found = true; var frag = document.createDocumentFragment(); var parts = text.split(regex); parts.forEach(function(part, i) { if (i % 2 === 0) { frag.appendChild(document.createTextNode(part)); } else { var span = document.createElement('span'); span.className = 'userscript-highlight'; span.textContent = part; frag.appendChild(span); } }); node.parentNode.replaceChild(frag, node); } }); } else if (node.nodeType === 1 && node.childNodes) { // element var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT']; if (!skipTags.includes(node.tagName)) { Array.from(node.childNodes).forEach(highlight); } } } highlight(document.body); // Re-highlight on dynamic content var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1 || node.nodeType === 3) highlight(node); }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Strip utm_, fbclid, gclid, etc. from all links on page (function() { var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content', 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid', 'ref', 'ref_src', 'source', 'medium', 'campaign']; function cleanUrl(url) { try { var u = new URL(url, window.location.origin); var changed = false; trackingParams.forEach(function(p) { if (u.searchParams.has(p)) { u.searchParams.delete(p); changed = true; } }); return changed ? u.toString() : url; } catch (e) { return url; } } function cleanLinks() { document.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } cleanLinks(); var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1) { if (node.tagName === 'A') cleanLinks(); node.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Auto-enable theater mode on YouTube (function() { function tryTheater() { var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]'); if (btn && !btn.classList.contains('activated')) { btn.click(); } } // Try immediately tryTheater(); // Try after navigation (SPA) var lastUrl = location.href; setInterval(function() { if (location.href !== lastUrl) { lastUrl = location.href; setTimeout(tryTheater, 500); } }, 1000); // Also try on player load var observer = new MutationObserver(tryTheater); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Remove or un-stick sticky/fixed headers that block content (function() { function unstick() { document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) { if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') { el.style.position = 'static'; el.style.top = 'auto'; el.style.zIndex = 'auto'; } }); } unstick(); var observer = new MutationObserver(unstick); observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] }); })(); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); })(); GitHub - forest2087/angularjs-form-builder: A simple form builder application written with AngularJS. · GitHub
Skip to content
BranchesTags

Repository files navigation

angularjs-form-builder

A simple form builder application written in AngularJS. It uses custom directives.

For a complete overview of the project and features, see http://selmanh.github.io/angularjs-form-builder

About

I have been working on AngularJS project for last couple of months. One of my assignments was to implement custom form builder that allows system admins to create custom forms, and allows users to view created forms, fill them and submit the data.

It took plenty of time to finish this task. While doing it, I had to make 100+ searches on Google, spend couple of days, and read a lot of stuff. So, I decided to create an open-source project and share my knowledge on this topic.

Dependencies

  • AngularJS 1.0.7+
  • Bootstrap 2.3.2+
  • Grunt (to build the project) 0.4.1+

Technical Details

Currently, there are just one service (form-service) and two directives (form-directive and field-directive).

Form service helps us to retrieve form properties from a json file. It also holds an array of possible fields that can be used while creating a new form.

After getting the form variable, we use it in form-directive as follows:

<form-directive form="form"> </form-directive>

And inside the form-directive, we use field-directive:

<div ng-repeat="field in form.fields">
<field-directive field="field"> </field-directive>
</div>

Form directive checks type of the field, and based on that type, it puts the template between directive tags.

switch(type){case'textfield':
templateUrl='./views/directive-templates/field/textfield.html';break;case'email':
...

At the end, here is how it looks:

<form-directiveform="form" class="ng-isolate-scope ng-scope">
...
<formname="myForm" id="myForm">
...
<divng-repeat="field in form.fields"><field-directivefield="field">
...
</field-directive></div></form></form-directive>

Known Issues

I will try to fix those. Feel free to send me PRs.

  • Date-picker - calendar doesn't show up.

  • Drop-down - empty option appears as the first child of select element and default value doesn't get selected.

Installing Modules

  • First you need to install node_modules. Cd to repository folder. $cd angularjs-form-builder

  • Execute $sudo npm install

  • Then execute $sudo bower install

Launching the App

  • Change directory to app folder $cd app

  • Now, you can start the grunt server: $grunt server

  • It will open the AngularJS app in your default browser.

Contact

About

A simple form builder application written with AngularJS.

Resources

Readme
Activity

Stars

0 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors