JSFiddle - React, Tailwind, and code Playground

by pavlovt

JavaScript

angular.module('t2')
.directive('exInput', function (_) {
    'use strict';
    return {
        restrict: 'AE',
        replace: true,
        transclude: true,
        compile: function (el, attr) {
            attr.type = attr.type || 'text';
            attr.name = attr.name || '';
            attr['ng-model'] = attr.name;
            attr.label = attr.label || '';
            attr.id = attr.id || attr.name;

            var addInput = '',
            addLabel = '',
            addDiv = '',
            tmp;
            angular.forEach(Object.keys(attr), function (key) {
                if (key.startsWith('$') || _.contains(['label'], key)) {
                    return true;
                }
                
                // TODO we should be able to use attributes with more than one hiphen (i.e. div-ng-class - this will not work now)
                tmp = key.replace(/^div|^label/g, "").toLowerCase();
                if (attr[key] !== "") {
                    tmp += '="' + attr[key] + '" ';
                } else {
                    tmp += ' ';
                }

                if (key.startsWith('div')) {
                    addDiv += tmp;
                } else if (key.startsWith('label')) {
                    addLabel += tmp;
                } else {
                    addInput += tmp;
                }

                
            });

            if (attr.name == '') {
                alert('This input has no name!');
            }

            var formName = el.closest('form').attr('name');
            if (!formName) {
                alert('The form that contains ' + attr.name + ' input has no name - the validation will not work');
            }

            var tmpl = '<div class="form-group '+addDiv+'">' +
                            '<label for="'+attr.id+'" ' + addLabel + '>'+attr.label+'</label>' +
                            '<div class="controls">' +
                                '<input '+addInput+' />' +
                           ...