JSFiddle - React, Tailwind, and code Playground

by Warwick Grigg

JavaScript

(function(){
    angular.module('formDirect', [])
	.directive('formDirectGenerate', function($compile){

		var linker = function(scope, element, attrs) {

			function extractLabel(obj)
			{
				var labelFields = ['name', 'title', 'label'];
				for (var i in labelFields)
				{
					var field = labelFields[i];
					if (_.has(obj, field))
					{
						return obj[field];
					}
				}

				return (obj._id) ? obj._id : obj.id;
			}

			function getTemplate(field, model, isArrayItem, arrayModel)
			{
				var content = '', i, j, k;

				if (_.isPlainObject(field))
				{
					content += '<fieldset {group-class}>';
					if (isArrayItem)
					{
						content += '<legend {group-title-class}>{legend}<button {remove-btn-class} data-ng-click="{model}.splice($index, 1)">Remove</button></legend>'.replace(/{model}/gi, arrayModel);
					}
					else
					{
						content += '<legend {group-title-class}>{legend}</legend>';
					}
					content = content.replace(/{legend}/gi, inflect.humanize(model.split('.').pop()));

					for (i in field)
					{
						// single options are handled below
						if (_.isPlainObject(field[i]) && (_.isUndefined(field[i].type) || field[i].type !== 'select'))
						{
							content += getTemplate(field[i], model + '.' + i, false, null);
						}
						else if (_.isArray(field[i]) && field[i].length > 0 && (_.isUndefined(field[i][0].type) || field[i][0].type !== 'select'))
						{
							if (_.isString(field[i][0]))
							{
								content += '<fieldset {group-class}>';
								content += '<legend {group-title-class}>{legend}<button {add-btn-class} data-ng-click="{id}.push(\'\')">Add</button></legend>';
								content += '<span data-ng-repeat="str in {id} track by $id($index)">'
								content += '<input id="{id}{{$index}}" type="text" {placeholder}>';
								content += '<button {remove-btn-class} data-ng-click="{id}.splice($index, 1)">Remove</button><br />';
								content += '</span>';
								content += '</fieldset>';
								content =...