├── test ├── resources │ └── foo.js ├── directives │ ├── dynamicFieldDirective.spec.js │ ├── maxItemsDirective.spec.js │ ├── minItemsDirective.spec.js │ ├── dynamicInputDirective.spec.js │ ├── dynamicFormDirective.spec.js │ ├── dynamicEditorDirective.spec.js │ └── dynamicListDirective.spec.js ├── karma.conf.js └── services │ ├── jsonSchemaService.spec.js │ ├── dynamicTemplatesProvider.spec.js │ └── validationProvider.spec.js ├── src ├── views │ ├── editors │ │ ├── date.jade │ │ ├── email.jade │ │ ├── integer.jade │ │ ├── multilineText.jade │ │ ├── property.jade │ │ ├── string.jade │ │ ├── uri.jade │ │ ├── bool.jade │ │ ├── number.jade │ │ ├── richText.jade │ │ ├── password.jade │ │ ├── dropdown.jade │ │ ├── object.jade │ │ ├── section.jade │ │ └── array.jade │ ├── fields │ │ ├── checkbox.jade │ │ ├── horizontal.jade │ │ └── default.jade │ └── forms │ │ ├── default.jade │ │ └── horizontal.jade ├── module.js ├── directives │ ├── maxItemsDirective.js │ ├── minItemsDirective.js │ ├── dynamicInputDirective.js │ ├── dynamicFieldDirective.js │ ├── dynamicFormDirective.js │ ├── dynamicListDirective.js │ └── dynamicEditorDirective.js └── services │ ├── jsonSchemaService.js │ ├── dynamicTemplatesProvider.js │ └── validationProvider.js ├── init.ps1 ├── .travis.yml ├── paths.js ├── README.md ├── bower.json ├── LICENSE.txt ├── package.json ├── gulpfile.js ├── .gitattributes ├── .gitignore └── dist ├── dynamic-forms.min.js └── dynamic-forms.js /test/resources/foo.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | var foo = 'bar'; 3 | }()); -------------------------------------------------------------------------------- /src/views/editors/date.jade: -------------------------------------------------------------------------------- 1 | input.form-control(type="date", ng-model="model") 2 | -------------------------------------------------------------------------------- /src/views/editors/email.jade: -------------------------------------------------------------------------------- 1 | input.form-control(type="email", ng-model="model") 2 | -------------------------------------------------------------------------------- /src/views/editors/integer.jade: -------------------------------------------------------------------------------- 1 | input.form-control(type="number", ng-model="model") 2 | -------------------------------------------------------------------------------- /src/views/editors/multilineText.jade: -------------------------------------------------------------------------------- 1 | textarea.form-control(rows="6" ng-model="model") -------------------------------------------------------------------------------- /src/views/editors/property.jade: -------------------------------------------------------------------------------- 1 | dynamic-field(ng-model="model", data-schema="schema") -------------------------------------------------------------------------------- /src/views/editors/string.jade: -------------------------------------------------------------------------------- 1 | input.form-control(type="text", data-ng-model="model") 2 | -------------------------------------------------------------------------------- /src/views/editors/uri.jade: -------------------------------------------------------------------------------- 1 | input.form-control(type="url", data-ng-model="model") 2 | -------------------------------------------------------------------------------- /src/views/editors/bool.jade: -------------------------------------------------------------------------------- 1 | input(type="checkbox", ng-checked="model", ng-model="model") 2 | -------------------------------------------------------------------------------- /src/views/editors/number.jade: -------------------------------------------------------------------------------- 1 | input.form-control(type="number", data-ng-model="model") 2 | -------------------------------------------------------------------------------- /src/views/editors/richText.jade: -------------------------------------------------------------------------------- 1 | textarea.form-control(rows="8", data-ng-model="model") 2 | -------------------------------------------------------------------------------- /init.ps1: -------------------------------------------------------------------------------- 1 | npm install -g gulp 2 | npm install -g bower 3 | npm install 4 | bower install 5 | gulp -------------------------------------------------------------------------------- /src/views/editors/password.jade: -------------------------------------------------------------------------------- 1 | input.form-control(type="password", data-ng-model="model") 2 | -------------------------------------------------------------------------------- /src/views/editors/dropdown.jade: -------------------------------------------------------------------------------- 1 | select.form-control(ng-options="{{schema.bindingExpression}}", ng-model="model") 2 | -------------------------------------------------------------------------------- /src/module.js: -------------------------------------------------------------------------------- 1 | (function (angular) { 2 | 'use strict'; 3 | 4 | angular.module('dynamic-forms', []); 5 | }(angular)); 6 | -------------------------------------------------------------------------------- /src/views/editors/object.jade: -------------------------------------------------------------------------------- 1 | div(data-ng-repeat="property in editor.getProperties() | orderBy:'index' track by property.name") 2 | dynamic-editor(ng-model="model[property.name]" data-schema="property") -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "0.11" 4 | - "0.10" 5 | before_script: 6 | - npm install -g gulp 7 | - npm install -g bower 8 | - npm install 9 | - bower install 10 | script: gulp -------------------------------------------------------------------------------- /src/views/fields/checkbox.jade: -------------------------------------------------------------------------------- 1 | .checkbox 2 | label 3 | dynamic-input(data-schema="schema", ng-model="model") {{schema.title}} 4 | p.text-danger(ng-show="field.hasError()") {{field.errorMessage}} 5 | -------------------------------------------------------------------------------- /src/views/forms/default.jade: -------------------------------------------------------------------------------- 1 | article 2 | form(role="form", ng-submit="dynamicForm.onSubmit()", novalidate) 3 | dynamic-editor(data-schema="schema", ng-model="model") 4 | section(data-ng-transclude) 5 | -------------------------------------------------------------------------------- /src/views/editors/section.jade: -------------------------------------------------------------------------------- 1 | div(class="panel panel-default", ng-class="{'panel-danger':editor.hasError(), 'panel-success':editor.isValid()}" ng-form) 2 | div(class="panel-heading") {{schema.title}} 3 | div(class="panel-body") 4 | p {{schema.description}} 5 | dynamic-editor(data-schema="schema" ng-model="model") -------------------------------------------------------------------------------- /src/views/forms/horizontal.jade: -------------------------------------------------------------------------------- 1 | article 2 | h1 {{schema.title}} 3 | h4 {{schema.description}} 4 | hr 5 | form(role="form", class="form-horizontal", ng-submit="form.onSubmit(dynamicForm)", novalidate) 6 | dynamic-editor(data-schema="schema", ng-model="model") 7 | div(class="form-group") 8 | div(class="col-sm-2") 9 | div(class="col-sm-10") 10 | section(ng-transclude) -------------------------------------------------------------------------------- /src/views/fields/horizontal.jade: -------------------------------------------------------------------------------- 1 | .form-group 2 | label.control-label.col-sm-2 {{schema.title}} 3 | span.required(ng-show="schema.required") * 4 | span.glyphicon.glyphicon-info-sign(ng-show="schema.description" title="{{schema.description}}") 5 | .col-sm-10 6 | dynamic-input(data-schema="schema", ng-model="model") 7 | span.glyphicon.form-control-feedback(ng-class="{'glyphicon-ok': field.showSuccess(), 'glyphicon-remove': field.showError()}") 8 | p.text-danger(ng-show="field.hasError()") {{field.errorMessage}} 9 | -------------------------------------------------------------------------------- /src/views/fields/default.jade: -------------------------------------------------------------------------------- 1 | .form-group.has-feedback(ng-class="{'has-error': field.hasError(), 'has-success': field.hasSuccess()}") 2 | label.control-label {{schema.title}} 3 | span.required(ng-show="schema.required") * 4 | span.glyphicon.glyphicon-info-sign(ng-show="schema.description" title="{{schema.description}}") 5 | dynamic-input(data-schema="schema", ng-model="model") 6 | span.glyphicon.form-control-feedback(ng-class="{'glyphicon-ok': field.showSuccess(), 'glyphicon-remove': field.showError()}") 7 | p.text-danger(data-ng-show="field.hasError()") {{field.errorMessage}} -------------------------------------------------------------------------------- /src/views/editors/array.jade: -------------------------------------------------------------------------------- 1 | dynamic-list(data-schema="schema", ng-model="model") 2 | p.text-danger(data-ng-show="formField.$error.message") {{formField.$error.message}} 3 | button.btn.btn-default.btn-xs(ng-click="dynamicList.addItem()", ng-disabled="!dynamicList.canAddItem()", type="button") Add Item 4 | ul.list-group 5 | li.list-group-item(ng-repeat="item in model") 6 | button.btn.btn-default.btn-xs(ng-click="dynamicList.removeItem(item, $index)", ng-disabled="!dynamicList.canRemoveItem()", type="button") Remove Item 7 | div 8 | dynamic-editor(data-schema="schema.items" ng-model="item" data-form="form") -------------------------------------------------------------------------------- /paths.js: -------------------------------------------------------------------------------- 1 | var paths = { 2 | scripts: ['./src/*.js', './src/**/*.js'], 3 | specs: './test/**/*.spec.js', 4 | jadeTemplates: './src/**/*.jade', 5 | vendorScripts: [ 6 | 'bower_components/angular/angular.js', 7 | 'bower_components/angular-mocks/angular-mocks.js', 8 | 'bower_components/jquery/dist/jquery.js' 9 | ] 10 | }; 11 | 12 | paths.karmaFiles = paths.vendorScripts 13 | .concat('src/*.js') 14 | .concat('src/**/*.js') 15 | .concat('build/templates.js') 16 | .concat('test/**/*.spec.js'); 17 | 18 | paths.buildFiles = paths.scripts.concat('./build/templates.js'); 19 | 20 | paths.codeCoverage = {}; 21 | paths.codeCoverage[paths.scripts] = ['coverage']; 22 | 23 | module.exports = paths; -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![Build Status](https://travis-ci.org/wbreza/angular-dynamic-forms.svg)](https://travis-ci.org/wbreza/angular-dynamic-forms) 2 | 3 | #angular-dynamic-forms 4 | Automatically build angular forms with JSON schema 5 | 6 | Demos / examples are coming soon. 7 | 8 | ## Dependencies 9 | - Angular JS >= v1.2 10 | 11 | ## Dev Dependencies 12 | - Node 13 | - Gulp 14 | - Karma 15 | - Bower 16 | 17 | 18 | ## Installation 19 | // If you don't already have gulp installed 20 | npm install -g gulp 21 | 22 | // If you don't already have bower installed 23 | npm install -g bower 24 | 25 | // Installs on dev dependencies 26 | npm install 27 | 28 | // Installs all bower dependencies 29 | bower install 30 | 31 | // Runs default gulp task (Builds and runs unit tests) 32 | gulp 33 | 34 | ## Usage 35 | angular.module('app', ['dynamic-forms']); 36 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-dynamic-forms", 3 | "version": "0.1.3", 4 | "authors": [ 5 | "Wallace Breza " 6 | ], 7 | "main": "dist/dynamic-forms.js", 8 | "repository": { 9 | "type": "git", 10 | "url": "git://github.com/wbreza/angular-dynamic-forms.git" 11 | }, 12 | "license": "MIT", 13 | "ignore": [ 14 | "node_modules", 15 | "bower_components", 16 | "src", 17 | "test", 18 | "gulpfile.js", 19 | "init.ps1", 20 | "paths.js" 21 | ], 22 | "dependencies": { 23 | "angular": "~1.5.5", 24 | "angular-mocks": "~1.5.5", 25 | "jquery": "~2.1.1" 26 | }, 27 | "homepage": "https://github.com/wbreza/angular-dynamic-forms", 28 | "description": "Build dynamic angular forms with JSON schema", 29 | "keywords": [ 30 | "angular", 31 | "dynamic", 32 | "forms", 33 | "json", 34 | "schema" 35 | ] 36 | } -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Wallace Breza 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dynamic-forms", 3 | "version": "0.1.0", 4 | "description": "Dynamically build angular forms with JSON schema", 5 | "main": "", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "https://wallace.visualstudio.com/defaultcollection/projects/_git/dynamic-forms" 12 | }, 13 | "keywords": [ 14 | "dynamic", 15 | "forms" 16 | ], 17 | "author": "Wallace J. Breza", 18 | "license": "MIT", 19 | "devDependencies": { 20 | "gulp": "^3.8.0", 21 | "gulp-angular-templatecache": "^1.2.1", 22 | "gulp-concat": "^2.4.1", 23 | "gulp-jade": "^0.5.0", 24 | "gulp-notify": "^1.3.1", 25 | "gulp-rename": "^1.2.0", 26 | "gulp-rimraf": "^0.1.1", 27 | "gulp-uglify": "^1.0.1", 28 | "jade": "^1.3.1", 29 | "jasmine-core": "^2.5.2", 30 | "karma": "^1.4.1", 31 | "karma-chrome-launcher": "^2.0.0", 32 | "karma-coverage": "^1.1.1", 33 | "karma-jasmine": "^1.1.0", 34 | "karma-phantomjs-launcher": "^1.0.2", 35 | "karma-spec-reporter": "0.0.26", 36 | "rimraf": "^2.2.8" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /test/directives/dynamicFieldDirective.spec.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | 'use strict'; 3 | 4 | var userSchema = { 5 | properties: { 6 | firstName: { type: 'string', required: true, minLength: 3, maxLength: 20 } 7 | } 8 | }; 9 | 10 | var userModel = { 11 | firstName: 'John', 12 | }; 13 | 14 | describe('dynamicField directive', function () { 15 | var form = null, scope = null; 16 | 17 | beforeEach(function () { 18 | module('dynamic-forms'); 19 | var template = ''; 20 | 21 | inject(function ($compile, $rootScope) { 22 | scope = $rootScope.$new(); 23 | scope.userModel = angular.copy(userModel); 24 | scope.userSchema = angular.copy(userSchema); 25 | 26 | form = angular.element(template); 27 | form = $compile(form)(scope)[0]; 28 | scope.$digest(); 29 | }); 30 | }); 31 | 32 | it('selects the template specified by the "type" on the field schema', function () { 33 | var fieldElements = form.querySelectorAll('.form-group'); 34 | expect(fieldElements.length).toEqual(Object.keys(scope.userSchema.properties).length); 35 | }); 36 | }); 37 | }()); 38 | -------------------------------------------------------------------------------- /src/directives/maxItemsDirective.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | 'use strict'; 3 | 4 | function MaxItemsDirective() { 5 | return { 6 | restrict: 'A', 7 | require: '?ngModel', 8 | link: function (scope, element, attrs, ngModel) { 9 | if (!ngModel) { 10 | return; 11 | } 12 | 13 | var maxItems = parseInt(attrs.maxItems, 10); 14 | if (isNaN(maxItems)) { 15 | return; 16 | } 17 | 18 | var validator = function (model) { 19 | var isValid = !!(model && model.length <= maxItems); 20 | ngModel.$setValidity('maxitems', isValid); 21 | 22 | return model; 23 | }; 24 | 25 | scope.$watchCollection(attrs.ngModel, function (newValue) { 26 | if (!angular.isDefined(newValue)) { 27 | return; 28 | } 29 | 30 | validator(ngModel.$modelValue); 31 | }); 32 | 33 | ngModel.$formatters.push(validator); 34 | ngModel.$parsers.unshift(validator); 35 | } 36 | }; 37 | } 38 | 39 | angular.module('dynamic-forms') 40 | .directive('maxItems', [MaxItemsDirective]); 41 | }()); 42 | -------------------------------------------------------------------------------- /src/directives/minItemsDirective.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | 'use strict'; 3 | 4 | function MinItemsDirective() { 5 | return { 6 | restrict: 'A', 7 | require: '?ngModel', 8 | link: function (scope, element, attrs, ngModel) { 9 | if (!ngModel) { 10 | return; 11 | } 12 | 13 | var minItems = parseInt(attrs.minItems, 10); 14 | if (isNaN(minItems)) { 15 | return; 16 | } 17 | 18 | var validator = function (model) { 19 | var isValid = !!(model && model.length >= minItems); 20 | ngModel.$setValidity('minitems', isValid); 21 | 22 | return model; 23 | }; 24 | 25 | scope.$watchCollection(attrs.ngModel, function (newValue) { 26 | if (!angular.isDefined(newValue)) { 27 | return; 28 | } 29 | 30 | validator(ngModel.$modelValue); 31 | }); 32 | 33 | ngModel.$formatters.push(validator); 34 | ngModel.$parsers.unshift(validator); 35 | } 36 | }; 37 | } 38 | 39 | angular.module('dynamic-forms') 40 | .directive('minItems', [MinItemsDirective]); 41 | }()); 42 | -------------------------------------------------------------------------------- /test/karma.conf.js: -------------------------------------------------------------------------------- 1 | var karmaFiles = [ 2 | 'bower_components/angular/angular.js', 3 | 'bower_components/angular-mocks/angular-mocks.js', 4 | 'bower_components/jquery/dist/jquery.js', 5 | 'src/*.js', 6 | 'src/**/*.js', 7 | 'build/templates.js', 8 | 'test/**/*.spec.js' 9 | ]; 10 | 11 | module.exports = function (config) { 12 | config.set({ 13 | basePath: '../', 14 | files: karmaFiles, 15 | exclude: [], 16 | reporters: process.env.DEBUG ? ['spec'] : ['spec', 'coverage'], 17 | autoWatch: true, 18 | frameworks: ['jasmine'], 19 | browsers: [process.env.DEBUG ? 'Chrome' : 'PhantomJS'], 20 | plugins: [ 21 | 'karma-chrome-launcher', 22 | 'karma-jasmine', 23 | 'karma-spec-reporter', 24 | 'karma-phantomjs-launcher', 25 | 'karma-coverage' 26 | ], 27 | preprocessors: { 'src/**/*.js': ['coverage'] }, 28 | coverageReporter: { 29 | reporters: [ 30 | { type: 'html' }, 31 | { type: 'text-summary' } 32 | ] 33 | }, 34 | // level of logging 35 | // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG 36 | logLevel: config.LOG_INFO, 37 | singleRun: true 38 | }); 39 | }; 40 | -------------------------------------------------------------------------------- /src/directives/dynamicInputDirective.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | 'use strict'; 3 | 4 | function DynamicInputDirective(dynamicTemplates, $compile, $interpolate, validation) { 5 | return { 6 | restrict: 'E', 7 | replace: true, 8 | require: '?^form', 9 | link: function (scope, element, attrs, formCtrl) { 10 | // Get the template 11 | var elementId = scope.schema.name + '-' + scope.$id, 12 | template = dynamicTemplates.getTemplate('editors', scope.schema.format, scope.schema.type, 'string'); 13 | 14 | template = $interpolate(template)(scope); 15 | 16 | var inputElement = angular.element(template); 17 | 18 | inputElement.attr({ 19 | id: elementId, 20 | name: elementId 21 | }); 22 | 23 | validation.applyRules(inputElement, scope.schema); 24 | element.replaceWith(inputElement); 25 | $compile(inputElement)(scope); 26 | 27 | if (formCtrl) { 28 | scope.form = formCtrl; 29 | scope.formField = formCtrl[elementId]; 30 | if (scope.formField) { 31 | validation.monitorField(scope, scope.schema, scope.formField); 32 | } 33 | } 34 | } 35 | }; 36 | } 37 | 38 | angular.module('dynamic-forms') 39 | .directive('dynamicInput', ['dynamicTemplates', '$compile', '$interpolate', 'validation', DynamicInputDirective]); 40 | }()); 41 | -------------------------------------------------------------------------------- /src/directives/dynamicFieldDirective.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | 'use strict'; 3 | 4 | function DynamicFieldController($scope) { 5 | var vm = this; 6 | 7 | vm.showError = function () { 8 | var field = $scope.formField; 9 | return !!(field && field.$invalid && field.$dirty); 10 | }; 11 | 12 | vm.showSuccess = function () { 13 | var field = $scope.formField; 14 | return !!(field && field.$valid && field.$dirty); 15 | }; 16 | 17 | vm.hasError = function() { 18 | var field = $scope.formField; 19 | return !!($scope.errorMessage && field.$dirty); 20 | }; 21 | 22 | vm.hasSuccess = function() { 23 | var field = $scope.formField; 24 | return !!(field.$valid && ($scope.model || field.$dirty)); 25 | }; 26 | } 27 | 28 | function DynamicFieldDirective($compile, validation, dynamicTemplates) { 29 | 30 | return { 31 | restrict: 'E', 32 | replace: true, 33 | require: '?^dynamicForm', 34 | controller: 'dynamicFieldController', 35 | controllerAs: 'field', 36 | link: function (scope, element, attrs, dynamicForm) { 37 | var template = dynamicForm ? dynamicForm.getFieldTemplate(scope.schema.fieldType) : dynamicTemplates.getFieldTemplate(scope.schema), 38 | fieldElement = angular.element(template); 39 | 40 | element.replaceWith(fieldElement); 41 | $compile(fieldElement)(scope); 42 | } 43 | }; 44 | } 45 | 46 | angular.module('dynamic-forms') 47 | .controller('dynamicFieldController', ['$scope', DynamicFieldController]) 48 | .directive('dynamicField', ['$compile', 'validation', 'dynamicTemplates', DynamicFieldDirective]); 49 | 50 | }()); 51 | -------------------------------------------------------------------------------- /src/directives/dynamicFormDirective.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | 'use strict'; 3 | 4 | function DynamicFormDirective(dynamicTemplates, $compile) { 5 | return { 6 | restrict: 'E', 7 | replace: true, 8 | transclude: true, 9 | scope: { 10 | schema: '=', 11 | model: '=ngModel', 12 | submit: '&' 13 | }, 14 | controller: 'dynamicFormController', 15 | controllerAs: 'dynamicForm', 16 | link: function (scope, element, attrs, ctrl, transclude) { 17 | var template = dynamicTemplates.getFormTemplate(scope.schema), 18 | formElement = angular.element(template); 19 | 20 | element.append(formElement); 21 | $compile(formElement, transclude)(scope); 22 | 23 | // Find the first form within the template and set it as part of the scope. 24 | scope.form = formElement.controller('form'); 25 | if (!scope.form) { 26 | scope.form = formElement.find('form').controller('form'); 27 | } 28 | } 29 | }; 30 | } 31 | 32 | function DynamicFormController($scope, dynamicTemplates, jsonSchema) { 33 | var vm = this; 34 | 35 | vm.onSubmit = function () { 36 | $scope.submit({ '$form': $scope.form, '$model': $scope.model }); 37 | }; 38 | 39 | vm.getFieldTemplate = function (fieldType) { 40 | return dynamicTemplates.getFieldTemplate(fieldType || $scope.schema.format || 'default'); 41 | }; 42 | 43 | vm.setupSchema = function (editorSchema) { 44 | if (angular.isDefined(editorSchema.$ref)) { 45 | jsonSchema.extend(editorSchema, $scope.schema); 46 | } 47 | }; 48 | } 49 | 50 | angular.module('dynamic-forms') 51 | .directive('dynamicForm', ['dynamicTemplates', '$compile', DynamicFormDirective]) 52 | .controller('dynamicFormController', ['$scope', 'dynamicTemplates', 'jsonSchema', DynamicFormController]); 53 | }()); 54 | -------------------------------------------------------------------------------- /src/services/jsonSchemaService.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | 'use strict'; 3 | 4 | function JsonSchemaService() { 5 | var schemaStore = {}; 6 | 7 | function isComplex(schema) { 8 | return (schema.type === 'object' || schema.type === 'array') || ((schema.properties && Object.keys(schema.properties).length > 0) || false); 9 | } 10 | 11 | function getSchema(pointer) { 12 | //TODO: if the pointer is the URI and the URI is not in the cache, then attempt to download and add to cache 13 | 14 | return schemaStore[pointer]; 15 | } 16 | 17 | function registerSchema(schema) { 18 | if (!schema.id) { 19 | throw new Error('Schema does not specify an ID attribute'); 20 | } 21 | 22 | schemaStore[schema.id] = schema; 23 | } 24 | 25 | function extendSchema(schema, rootSchema) { 26 | if (!angular.isDefined(schema.$ref)) { 27 | return schema; 28 | } 29 | 30 | var referencedSchema = schema.$ref[0] === '#' ? getDocumentSchema(schema.$ref, rootSchema) 31 | : getSchema(schema.$ref); 32 | 33 | if (referencedSchema) { 34 | angular.extend(schema, referencedSchema); 35 | } 36 | 37 | return schema; 38 | } 39 | 40 | /** 41 | * Searches the specified schema for a reference pointer 42 | * 43 | * @param {pointer} the JSON path to search for 44 | * @param {schema} the schema to search 45 | */ 46 | function getDocumentSchema(pointer, schema) { 47 | var pathParts = pointer.substr(2).split('/'), 48 | currentNode = schema; 49 | 50 | for (var i = 0; i < pathParts.length; i++) { 51 | currentNode = currentNode[pathParts[i]]; 52 | 53 | if (!angular.isDefined(currentNode)) { 54 | return null; 55 | } 56 | } 57 | 58 | return currentNode; 59 | } 60 | 61 | function clearSchemaStore() { 62 | schemaStore = {}; 63 | } 64 | 65 | return { 66 | isComplex: isComplex, 67 | get: getSchema, 68 | register: registerSchema, 69 | extend: extendSchema, 70 | clear: clearSchemaStore 71 | }; 72 | } 73 | 74 | angular.module('dynamic-forms') 75 | .factory('jsonSchema', [JsonSchemaService]); 76 | }()); 77 | -------------------------------------------------------------------------------- /src/directives/dynamicListDirective.js: -------------------------------------------------------------------------------- 1 | (function (undefined) { 2 | 'use strict'; 3 | 4 | function DynamicListDirective(validation) { 5 | return { 6 | restrict: 'E', 7 | replace: true, 8 | require: ['?^form', 'ngModel'], 9 | transclude: true, 10 | template: '
', 11 | controller: 'dynamicListController', 12 | controllerAs: 'dynamicList', 13 | link: function (scope, element, attrs, ctrls) { 14 | var formCtrl = ctrls[0], 15 | ngModelCtrl = ctrls[1]; 16 | 17 | if (formCtrl) { 18 | scope.form = formCtrl; 19 | ngModelCtrl.$name = scope.schema.name + '-' + scope.$id; 20 | formCtrl.$addControl(ngModelCtrl); 21 | scope.formField = formCtrl[ngModelCtrl.$name]; 22 | 23 | if (scope.formField) { 24 | validation.monitorField(scope, scope.schema, scope.formField); 25 | } 26 | } 27 | 28 | scope.$on('$destroy', function () { 29 | formCtrl.$removeControl(ngModelCtrl); 30 | }); 31 | } 32 | }; 33 | } 34 | 35 | function DynamicListController($scope) { 36 | var vm = this; 37 | 38 | function activate() { 39 | if ($scope.model === undefined) { 40 | $scope.model = []; 41 | } 42 | 43 | if (angular.isDefined($scope.schema.minItems) && $scope.model.length < $scope.schema.minItems) { 44 | for (var i = $scope.model.length; i < $scope.schema.minItems; i++) { 45 | vm.addItem(); 46 | } 47 | } 48 | } 49 | 50 | vm.addItem = function () { 51 | $scope.model.push({}); 52 | }; 53 | 54 | vm.removeItem = function (item, index) { 55 | return $scope.model.splice(index, 1); 56 | }; 57 | 58 | vm.canAddItem = function() { 59 | return angular.isDefined($scope.schema.maxItems) ? ($scope.model.length < $scope.schema.maxItems) : true; 60 | }; 61 | 62 | vm.canRemoveItem = function() { 63 | return angular.isDefined($scope.schema.minItems) ? ($scope.model.length > $scope.schema.minItems) : true; 64 | }; 65 | 66 | activate(); 67 | } 68 | 69 | angular.module('dynamic-forms') 70 | .directive('dynamicList', ['validation', DynamicListDirective]) 71 | .controller('dynamicListController', ['$scope', DynamicListController]); 72 | }()); 73 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'), 2 | notify = require('gulp-notify'), 3 | templateCache = require('gulp-angular-templatecache'), 4 | jade = require('gulp-jade'), 5 | rename = require('gulp-rename'), 6 | concat = require('gulp-concat'), 7 | uglify = require('gulp-uglify'), 8 | rimraf = require('rimraf'), 9 | paths = require('./paths.js'); 10 | KarmaServer = require('karma').Server; 11 | 12 | // TEST 13 | gulp.task('karma', ['templates'], function (done) { 14 | new KarmaServer({ 15 | configFile: __dirname + '/test/karma.conf.js' 16 | }, done).start(); 17 | }) 18 | .on('error', notify.onError({ 19 | title: 'Error Running Karma Unit Tests', 20 | message: '<%= error.message %>' 21 | })); 22 | 23 | gulp.task('templates', function () { 24 | return gulp.src(paths.jadeTemplates) 25 | .pipe(jade({ pretty: true })) 26 | .pipe(templateCache('templates.js', { 27 | module: 'dynamic-forms', 28 | root: '/app/dynamic-forms' 29 | })) 30 | .pipe(gulp.dest('./build')) 31 | .on('error', notify.onError({ 32 | title: 'Error Running Angular Templates', 33 | message: '<%= error.message %>' 34 | })); 35 | }); 36 | 37 | gulp.task('combine-scripts', ['templates'], function () { 38 | return gulp.src(paths.buildFiles) 39 | .pipe(concat('dynamic-forms.js')) 40 | .pipe(gulp.dest('./dist')) 41 | .on('error', notify.onError({ 42 | title: 'Error Combining Scripts', 43 | message: '<%= error.message %>' 44 | })); 45 | }); 46 | 47 | gulp.task('uglify', ['combine-scripts'], function () { 48 | return gulp.src('./dist/dynamic-forms.js') 49 | .pipe(uglify()) 50 | .pipe(rename('dynamic-forms.min.js')) 51 | .pipe(gulp.dest('./dist')) 52 | .on('error', notify.onError({ 53 | title: 'Error Uglifying', 54 | message: '<%= error.message %>' 55 | })); 56 | }); 57 | 58 | gulp.task('jade', function () { 59 | return gulp.src(paths.jadeTemplates) 60 | .pipe(jade({ pretty: true })) 61 | .pipe(gulp.dest('./build/templates')) 62 | .on('error', notify.onError({ 63 | title: 'Error Running Karma Unit Tests', 64 | message: '<%= error.message %>' 65 | })); 66 | }); 67 | 68 | gulp.task('clean', function (cb) { 69 | rimraf('./build', cb); 70 | }); 71 | 72 | gulp.task('watch', ['default'], function () { 73 | gulp.watch(paths.scripts, ['karma']); 74 | gulp.watch(paths.jadeTemplates, ['templates']); 75 | }); 76 | 77 | gulp.task('build', ['clean', 'templates', 'combine-scripts', 'uglify']); 78 | gulp.task('default', ['build', 'karma']); -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | ############################################################################### 2 | # Set default behavior to automatically normalize line endings. 3 | ############################################################################### 4 | * text=auto 5 | 6 | ############################################################################### 7 | # Set default behavior for command prompt diff. 8 | # 9 | # This is need for earlier builds of msysgit that does not have it on by 10 | # default for csharp files. 11 | # Note: This is only used by command line 12 | ############################################################################### 13 | #*.cs diff=csharp 14 | 15 | ############################################################################### 16 | # Set the merge driver for project and solution files 17 | # 18 | # Merging from the command prompt will add diff markers to the files if there 19 | # are conflicts (Merging from VS is not affected by the settings below, in VS 20 | # the diff markers are never inserted). Diff markers may cause the following 21 | # file extensions to fail to load in VS. An alternative would be to treat 22 | # these files as binary and thus will always conflict and require user 23 | # intervention with every merge. To do so, just uncomment the entries below 24 | ############################################################################### 25 | #*.sln merge=binary 26 | #*.csproj merge=binary 27 | #*.vbproj merge=binary 28 | #*.vcxproj merge=binary 29 | #*.vcproj merge=binary 30 | #*.dbproj merge=binary 31 | #*.fsproj merge=binary 32 | #*.lsproj merge=binary 33 | #*.wixproj merge=binary 34 | #*.modelproj merge=binary 35 | #*.sqlproj merge=binary 36 | #*.wwaproj merge=binary 37 | 38 | ############################################################################### 39 | # behavior for image files 40 | # 41 | # image files are treated as binary by default. 42 | ############################################################################### 43 | #*.jpg binary 44 | #*.png binary 45 | #*.gif binary 46 | 47 | ############################################################################### 48 | # diff behavior for common document formats 49 | # 50 | # Convert binary document formats to text before diffing them. This feature 51 | # is only available from the command line. Turn it on by uncommenting the 52 | # entries below. 53 | ############################################################################### 54 | #*.doc diff=astextplain 55 | #*.DOC diff=astextplain 56 | #*.docx diff=astextplain 57 | #*.DOCX diff=astextplain 58 | #*.dot diff=astextplain 59 | #*.DOT diff=astextplain 60 | #*.pdf diff=astextplain 61 | #*.PDF diff=astextplain 62 | #*.rtf diff=astextplain 63 | #*.RTF diff=astextplain 64 | -------------------------------------------------------------------------------- /test/directives/maxItemsDirective.spec.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | 'use strict'; 3 | 4 | var $$compile = null, 5 | $$rootScope = null, 6 | scope = null; 7 | 8 | describe('maxItems validation directive', function () { 9 | beforeEach(function() { 10 | module('dynamic-forms'); 11 | 12 | inject(function($compile, $rootScope) { 13 | $$rootScope = $rootScope; 14 | $$compile = $compile; 15 | 16 | }); 17 | }); 18 | 19 | function createDynamicList(maxItems, items) { 20 | scope = $$rootScope.$new(); 21 | scope.model = items; 22 | 23 | var element = angular.element('
'); 24 | element.attr('data-max-items', maxItems); 25 | 26 | element = $$compile(element)(scope); 27 | scope.$digest(); 28 | 29 | return element; 30 | } 31 | 32 | it('passes validation when the maxItems is not a number', function () { 33 | var element = createDynamicList('string', [1, 2, 3]); 34 | 35 | expect(element.hasClass('ng-valid')).toBeTruthy(); 36 | expect(element.hasClass('ng-invalid')).not.toBeTruthy(); 37 | }); 38 | 39 | it('fails validation when the array length is greater than the value', function () { 40 | var element = createDynamicList(2, [1, 2, 3]); 41 | expect(element.hasClass('ng-valid')).not.toBeTruthy(); 42 | expect(element.hasClass('ng-invalid')).toBeTruthy(); 43 | }); 44 | 45 | it('passes validation when the array length is equal to the value', function () { 46 | var element = createDynamicList(3, [1, 2, 3]); 47 | expect(element.hasClass('ng-invalid')).not.toBeTruthy(); 48 | expect(element.hasClass('ng-valid')).toBeTruthy(); 49 | }); 50 | 51 | it('fails validation when a new item is added and causes array length to exceed max value', function() { 52 | var element = createDynamicList(3, [1, 2, 3]); 53 | expect(element.hasClass('ng-invalid')).not.toBeTruthy(); 54 | expect(element.hasClass('ng-valid')).toBeTruthy(); 55 | 56 | scope.model.push(4); 57 | scope.$digest(); 58 | 59 | expect(element.hasClass('ng-valid')).not.toBeTruthy(); 60 | expect(element.hasClass('ng-invalid')).toBeTruthy(); 61 | }); 62 | 63 | it('passes validation when max items is exceeded and then an item is removed to be equal to the maxItems', function() { 64 | var element = createDynamicList(2, [1, 2, 3]); 65 | expect(element.hasClass('ng-invalid')).toBeTruthy(); 66 | expect(element.hasClass('ng-valid')).not.toBeTruthy(); 67 | 68 | scope.model.splice(0, 1); 69 | scope.$digest(); 70 | 71 | expect(element.hasClass('ng-valid')).toBeTruthy(); 72 | expect(element.hasClass('ng-invalid')).not.toBeTruthy(); 73 | }); 74 | }); 75 | }()); 76 | -------------------------------------------------------------------------------- /test/directives/minItemsDirective.spec.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | 'use strict'; 3 | 4 | var $$compile = null, 5 | $$rootScope = null, 6 | scope = null; 7 | 8 | describe('minItems validation directive', function () { 9 | beforeEach(function () { 10 | module('dynamic-forms'); 11 | 12 | inject(function ($compile, $rootScope) { 13 | $$rootScope = $rootScope; 14 | $$compile = $compile; 15 | 16 | }); 17 | }); 18 | 19 | function createDynamicList(minItems, items) { 20 | scope = $$rootScope.$new(); 21 | scope.model = items; 22 | 23 | var element = angular.element('
'); 24 | element.attr('data-min-items', minItems); 25 | 26 | element = $$compile(element)(scope); 27 | scope.$digest(); 28 | 29 | return element; 30 | } 31 | 32 | it('passes validation when the minItems is not a number', function() { 33 | var element = createDynamicList('string', [1, 2, 3]); 34 | 35 | expect(element.hasClass('ng-valid')).toBeTruthy(); 36 | expect(element.hasClass('ng-invalid')).not.toBeTruthy(); 37 | }); 38 | 39 | it('fails validation when the array length is less than the value', function () { 40 | var element = createDynamicList(2, [1]); 41 | expect(element.hasClass('ng-valid')).not.toBeTruthy(); 42 | expect(element.hasClass('ng-invalid')).toBeTruthy(); 43 | }); 44 | 45 | it('passes validation when the array length is equal to the value', function () { 46 | var element = createDynamicList(3, [1, 2, 3]); 47 | expect(element.hasClass('ng-invalid')).not.toBeTruthy(); 48 | expect(element.hasClass('ng-valid')).toBeTruthy(); 49 | }); 50 | 51 | it('fails validation when an item is removed and causes array length to be less than the min value', function () { 52 | var element = createDynamicList(2, [1, 2]); 53 | expect(element.hasClass('ng-invalid')).not.toBeTruthy(); 54 | expect(element.hasClass('ng-valid')).toBeTruthy(); 55 | 56 | scope.model.splice(0, 1); 57 | scope.$digest(); 58 | 59 | expect(element.hasClass('ng-valid')).not.toBeTruthy(); 60 | expect(element.hasClass('ng-invalid')).toBeTruthy(); 61 | }); 62 | 63 | it('passes validation when min items is less than min value and then an item is added to be equal to the minItems', function () { 64 | var element = createDynamicList(2, [1]); 65 | expect(element.hasClass('ng-invalid')).toBeTruthy(); 66 | expect(element.hasClass('ng-valid')).not.toBeTruthy(); 67 | 68 | scope.model.push(2); 69 | scope.$digest(); 70 | 71 | expect(element.hasClass('ng-valid')).toBeTruthy(); 72 | expect(element.hasClass('ng-invalid')).not.toBeTruthy(); 73 | }); 74 | }); 75 | }()); 76 | -------------------------------------------------------------------------------- /test/directives/dynamicInputDirective.spec.js: -------------------------------------------------------------------------------- 1 | describe('dynamicInput directive', function () { 2 | 'use strict'; 3 | 4 | var fieldSchema = { name: 'firstName', type: 'string', required: true, minLength: 3, maxLength: 20 }, 5 | fieldModel = 'John', 6 | template = '
', 7 | scope = null, 8 | $$compile = null; 9 | 10 | beforeEach(function () { 11 | module('dynamic-forms'); 12 | 13 | inject(function ($compile, $rootScope) { 14 | scope = $rootScope.$new(); 15 | scope.model = fieldModel; 16 | scope.schema = fieldSchema; 17 | 18 | $$compile = $compile; 19 | }); 20 | }); 21 | 22 | function createDynamicInput(fieldScope, selector) { 23 | var container = angular.element(template); 24 | container = $$compile(container)(fieldScope); 25 | scope.$digest(); 26 | 27 | return container.find(selector || 'input'); 28 | } 29 | 30 | it('creates a dynamic input element', function () { 31 | var input = createDynamicInput(scope); 32 | 33 | expect(input.length).toEqual(1); 34 | expect(input[0].tagName).toEqual('INPUT'); 35 | }); 36 | 37 | it('should set the model of the input element to the specified model value', function() { 38 | var input = createDynamicInput(scope); 39 | 40 | expect(input.val()).toEqual(fieldModel); 41 | }); 42 | 43 | it('should set the validation attributes as defined by the field schema', function () { 44 | var input = createDynamicInput(scope); 45 | 46 | expect(input.attr('required')).toEqual('required'); 47 | expect(parseInt(input.attr('ng-minlength'), 10)).toEqual(fieldSchema.minLength); 48 | expect(parseInt(input.attr('ng-maxlength'), 10)).toEqual(fieldSchema.maxLength); 49 | }); 50 | 51 | it('should use the "format" property on the schema over the "type" property when the "format" property is defined', function() { 52 | scope.schema.format = 'multilineText'; 53 | var input = createDynamicInput(scope, 'textarea'); 54 | 55 | expect(input[0].tagName).toEqual('TEXTAREA'); 56 | }); 57 | 58 | it('should use the default "string" template when the "type" or "format" specific templates cannot be found', function() { 59 | scope.schema.format = 'fancyEmailTemplate'; 60 | 61 | var input = createDynamicInput(scope); 62 | 63 | expect(input[0].tagName).toEqual('INPUT'); 64 | expect(input.attr('type')).toEqual('text'); 65 | }); 66 | 67 | it('registers the form field with the formController', function () { 68 | var input = createDynamicInput(scope, 'INPUT'), 69 | inputScope = angular.element(input).scope(); 70 | 71 | expect(inputScope.formField).toBeDefined(); 72 | }); 73 | 74 | it('set the errorMessage property of the form field when an validation error exists', function () { 75 | var input = createDynamicInput(scope, 'INPUT'), 76 | inputScope = angular.element(input).scope(); 77 | 78 | expect(inputScope.errorMessage).toBeDefined(); 79 | expect(inputScope.errorMessage).toBeNull(); 80 | 81 | scope.model = ''; 82 | scope.$digest(); 83 | 84 | expect(inputScope.errorMessage.length).toBeGreaterThan(0); 85 | }); 86 | }); 87 | -------------------------------------------------------------------------------- /src/directives/dynamicEditorDirective.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | 'use strict'; 3 | 4 | function DynamicEditorDirective($compile, dynamicTemplates, jsonSchema, validation) { 5 | return { 6 | restrict: 'E', 7 | replace: true, 8 | require: '?^dynamicForm', 9 | scope: { 10 | schema: '=', 11 | model: '=ngModel' 12 | }, 13 | controller: 'dynamicEditorController', 14 | controllerAs: 'editor', 15 | link: function (scope, element, attrs, dynamicFormCtrl) { 16 | if (dynamicFormCtrl) { 17 | // Inspects the schema for embedded references and expands as needed 18 | dynamicFormCtrl.setupSchema(scope.schema); 19 | } 20 | 21 | var isComplex = jsonSchema.isComplex(scope.schema), 22 | editorTemplate = dynamicTemplates.getEditorTemplate(scope.schema), 23 | editorElement = angular.element(editorTemplate); 24 | 25 | if (isComplex) { 26 | // Required to prevent recursive stackoverflow 27 | scope.schema.format = null; 28 | 29 | // Define an empty model when the model has not been defined 30 | if (scope.schema.type === 'object' && !scope.model) { 31 | scope.model = {}; 32 | } 33 | } 34 | 35 | element.replaceWith(editorElement); 36 | validation.applyRules(editorElement, scope.schema); 37 | $compile(editorElement)(scope); 38 | 39 | // Find the first form within the template and set it as part of the scope. 40 | scope.form = editorElement.controller('form'); 41 | if (!scope.form && editorElement[0].querySelector) { 42 | scope.form = angular.element(editorElement[0].querySelector('.ng-form')).controller('form'); 43 | } 44 | } 45 | }; 46 | } 47 | 48 | function DynamicEditorController($scope) { 49 | var vm = this, 50 | propertyArray = []; 51 | 52 | /** 53 | * Get and transforms the JSON schema properties from object map to an array 54 | * Also merges in the key of the object as the "name" within the property 55 | * Bound from the form HTML view 56 | * 57 | * @returns And array of JSON schema properties 58 | */ 59 | vm.getProperties = function () { 60 | if (propertyArray.length > 0) { 61 | return propertyArray; 62 | } 63 | 64 | for (var key in $scope.schema.properties) { 65 | var property = angular.extend({}, $scope.schema.properties[key], { name: key }); 66 | propertyArray.push(property); 67 | } 68 | 69 | return propertyArray; 70 | }; 71 | 72 | /** 73 | * Determines if the form is in a valid state 74 | * 75 | * @returns true if valid, otherwise false 76 | */ 77 | vm.isValid = function () { 78 | return $scope.form.$valid; 79 | }; 80 | 81 | /** 82 | * Determines if the form has errors that should be displayed 83 | * If the field starts in an invalid state, waits for it to become dirty 84 | * 85 | * @returns true if has errors, otherwise false. 86 | */ 87 | vm.hasError = function () { 88 | return $scope.form.$invalid && $scope.form.$dirty; 89 | }; 90 | } 91 | 92 | angular.module('dynamic-forms') 93 | .directive('dynamicEditor', ['$compile', 'dynamicTemplates', 'jsonSchema', 'validation', DynamicEditorDirective]) 94 | .controller('dynamicEditorController', ['$scope', DynamicEditorController]); 95 | }()); 96 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | ## Ignore Visual Studio temporary files, build results, and 2 | ## files generated by popular Visual Studio add-ons. 3 | 4 | # User-specific files 5 | *.suo 6 | *.user 7 | *.sln.docstates 8 | 9 | # Deployment artifacts 10 | deployment/ 11 | 12 | # Build results 13 | [Dd]ebug/ 14 | [Dd]ebugPublic/ 15 | [Rr]elease/ 16 | [Rr]eleases/ 17 | x64/ 18 | build/ 19 | bld/ 20 | [Bb]in/ 21 | [Oo]bj/ 22 | 23 | # Gulp generated files 24 | *.html 25 | *.html.js 26 | 27 | # Roslyn cache directories 28 | *.ide/ 29 | 30 | # MSTest test Results 31 | [Tt]est[Rr]esult*/ 32 | [Bb]uild[Ll]og.* 33 | 34 | #NUNIT 35 | *.VisualState.xml 36 | TestResult.xml 37 | 38 | # Build Results of an ATL Project 39 | [Dd]ebugPS/ 40 | [Rr]eleasePS/ 41 | dlldata.c 42 | 43 | *_i.c 44 | *_p.c 45 | *_i.h 46 | *.ilk 47 | *.meta 48 | *.obj 49 | *.pch 50 | *.pdb 51 | *.pgc 52 | *.pgd 53 | *.rsp 54 | *.sbr 55 | *.tlb 56 | *.tli 57 | *.tlh 58 | *.tmp 59 | *.tmp_proj 60 | *.log 61 | *.vspscc 62 | *.vssscc 63 | .builds 64 | *.pidb 65 | *.svclog 66 | *.scc 67 | 68 | # Chutzpah Test files 69 | _Chutzpah* 70 | 71 | # Visual C++ cache files 72 | ipch/ 73 | *.aps 74 | *.ncb 75 | *.opensdf 76 | *.sdf 77 | *.cachefile 78 | 79 | # Visual Studio profiler 80 | *.psess 81 | *.vsp 82 | *.vspx 83 | 84 | # TFS 2012 Local Workspace 85 | $tf/ 86 | 87 | # Guidance Automation Toolkit 88 | *.gpState 89 | 90 | # ReSharper is a .NET coding add-in 91 | _ReSharper*/ 92 | *.[Rr]e[Ss]harper 93 | *.DotSettings.user 94 | 95 | # JustCode is a .NET coding addin-in 96 | .JustCode 97 | 98 | # TeamCity is a build add-in 99 | _TeamCity* 100 | 101 | # DotCover is a Code Coverage Tool 102 | *.dotCover 103 | 104 | # NCrunch 105 | _NCrunch_* 106 | .*crunch*.local.xml 107 | 108 | # MightyMoose 109 | *.mm.* 110 | AutoTest.Net/ 111 | 112 | # Web workbench (sass) 113 | .sass-cache/ 114 | 115 | # Installshield output folder 116 | [Ee]xpress/ 117 | 118 | # DocProject is a documentation generator add-in 119 | DocProject/buildhelp/ 120 | DocProject/Help/*.HxT 121 | DocProject/Help/*.HxC 122 | DocProject/Help/*.hhc 123 | DocProject/Help/*.hhk 124 | DocProject/Help/*.hhp 125 | DocProject/Help/Html2 126 | DocProject/Help/html 127 | 128 | # Click-Once directory 129 | publish/ 130 | 131 | # Publish Web Output 132 | *.[Pp]ublish.xml 133 | *.azurePubxml 134 | ## TODO: Comment the next line if you want to checkin your 135 | ## web deploy settings but do note that will include unencrypted 136 | ## passwords 137 | *.pubxml 138 | 139 | # NuGet Packages 140 | packages/* 141 | *.nupkg 142 | ## TODO: If the tool you use requires repositories.config 143 | ## uncomment the next line 144 | #!packages/repositories.config 145 | 146 | # Enable "build/" folder in the NuGet Packages folder since 147 | # NuGet packages use it for MSBuild targets. 148 | # This line needs to be after the ignore of the build folder 149 | # (and the packages folder if the line above has been uncommented) 150 | !packages/build/ 151 | 152 | # Windows Azure Build Output 153 | csx/ 154 | *.build.csdef 155 | 156 | # Windows Store app package directory 157 | AppPackages/ 158 | 159 | # Others 160 | sql/ 161 | *.Cache 162 | ClientBin/ 163 | [Ss]tyle[Cc]op.* 164 | ~$* 165 | *~ 166 | *.dbmdl 167 | *.dbproj.schemaview 168 | *.pfx 169 | *.publishsettings 170 | node_modules/ 171 | bower_components/ 172 | coverage/ 173 | 174 | # RIA/Silverlight projects 175 | Generated_Code/ 176 | 177 | # Backup & report files from converting an old project file 178 | # to a newer Visual Studio version. Backup files are not needed, 179 | # because we have git ;-) 180 | _UpgradeReport_Files/ 181 | Backup*/ 182 | UpgradeLog*.XML 183 | UpgradeLog*.htm 184 | 185 | # SQL Server files 186 | *.mdf 187 | *.ldf 188 | 189 | # Business Intelligence projects 190 | *.rdl.data 191 | *.bim.layout 192 | *.bim_*.settings 193 | 194 | # Microsoft Fakes 195 | FakesAssemblies/ 196 | *.dat 197 | 198 | # Credentials File 199 | credentials.custom.js 200 | 201 | # Generated jshint configs 202 | .jshintrc.* 203 | -------------------------------------------------------------------------------- /src/services/dynamicTemplatesProvider.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | 'use strict'; 3 | 4 | var templatePaths = []; 5 | 6 | /** 7 | * Instantiates the DynamicTemplate Service 8 | * 9 | * @constructor 10 | * @this {DynamicTemplateService} 11 | */ 12 | function DynamicTemplatesService($templateCache, jsonSchema) { 13 | function getTemplateName(args) { 14 | if (!args || args.length < 1) { 15 | return null; 16 | } 17 | 18 | var arg = args[0]; 19 | return angular.isString(arg) ? arg : (arg.format || arg.type); 20 | } 21 | 22 | /** 23 | * Get the angular HTML template for the specified templateType and dataType 24 | * 25 | * @param {templateType} The type of template to search for 26 | * @param {templateName} 1 or more template names to search for within the template type 27 | * 28 | * @returns {string} The HTML template that matches the specified values, otherwise undefined. 29 | */ 30 | function getTemplate(templateType) { 31 | var template; 32 | 33 | if (arguments.length < 2) { 34 | return null; 35 | } 36 | 37 | for (var i = 1; i < arguments.length; i++) { 38 | var templateName = arguments[i]; 39 | 40 | for (var j = 0; j < templatePaths.length; j++) { 41 | var templatePath = templatePaths[j] + '/' + templateType + '/' + templateName + '.html'; 42 | template = $templateCache.get(templatePath); 43 | 44 | if (template) { 45 | break; 46 | } 47 | } 48 | 49 | if (template) { 50 | break; 51 | } 52 | } 53 | 54 | return template; 55 | } 56 | 57 | function getFormTemplate(formSchema) { 58 | return getTemplate('forms', formSchema.format, formSchema.type, 'default'); 59 | } 60 | 61 | function getEditorTemplate(editorSchema) { 62 | var isComplex = jsonSchema.isComplex(editorSchema); 63 | 64 | return isComplex ? getTemplate('editors', editorSchema.format, editorSchema.type, 'object') 65 | : getTemplate('editors', 'property'); 66 | } 67 | 68 | function getFieldTemplate() { 69 | var templateName = getTemplateName(arguments); 70 | return getTemplate('fields', templateName, 'default'); 71 | } 72 | 73 | return { 74 | getTemplate: getTemplate, 75 | getFormTemplate: getFormTemplate, 76 | getEditorTemplate: getEditorTemplate, 77 | getFieldTemplate: getFieldTemplate 78 | }; 79 | } 80 | 81 | /** 82 | * Instantiates the DynamicTemplate Provider 83 | * 84 | * @constructor 85 | * @this {DynamicTemplateProvider} 86 | */ 87 | function DynamicTemplatesProvider() { 88 | var provider = this; 89 | 90 | function trimPath(path) { 91 | if (path[path.length - 1] === '/') { 92 | path = path.substr(0, path.length - 1); 93 | } 94 | 95 | return path; 96 | } 97 | 98 | function registerTemplatePath(path, index) { 99 | if (!angular.isDefined(index)) { 100 | index = templatePaths.length; 101 | } 102 | 103 | if (templatePaths.indexOf(path) === -1) { 104 | templatePaths.splice(index, 0, trimPath(path)); 105 | } 106 | } 107 | 108 | function clearTemplatePaths() { 109 | templatePaths.length = 0; 110 | } 111 | 112 | function registerDefaultTemplatePaths() { 113 | registerTemplatePath('/app/dynamic-forms/views'); 114 | } 115 | 116 | function getTemplatePaths() { 117 | return templatePaths; 118 | } 119 | 120 | function activate() { 121 | provider.$get = ['$templateCache', 'jsonSchema', DynamicTemplatesService]; 122 | 123 | provider.registerTemplatePath = registerTemplatePath; 124 | provider.clearTemplatePaths = clearTemplatePaths; 125 | provider.getTemplatePaths = getTemplatePaths; 126 | 127 | registerDefaultTemplatePaths(); 128 | } 129 | 130 | activate(); 131 | } 132 | 133 | angular.module('dynamic-forms') 134 | .provider('dynamicTemplates', DynamicTemplatesProvider); 135 | }()); 136 | -------------------------------------------------------------------------------- /test/directives/dynamicFormDirective.spec.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | 'use strict'; 3 | 4 | var userSchema = { 5 | properties: { 6 | firstName: { type: 'string', required: true, minLength: 3, maxLength: 20 }, 7 | lastName: { type: 'string', required: true, minLength: 3, maxLength: 20 }, 8 | email: { type: 'string', format: 'email', required: true }, 9 | birthDate: { type: 'string', format: 'date' }, 10 | age: { type: 'integer', minimum: 0, maximum: 110 } 11 | } 12 | }; 13 | 14 | var userModel = { 15 | firstName: 'John', 16 | lastName: 'Doe', 17 | email: 'jon@doe.me', 18 | age: 23 19 | }; 20 | 21 | describe('dynamicForm directive', function () { 22 | var scope = null, 23 | form = null; 24 | 25 | beforeEach(function () { 26 | module('dynamic-forms'); 27 | var template = '

Transclude me please

'; 28 | 29 | inject(function ($compile, $rootScope) { 30 | scope = $rootScope.$new(); 31 | scope.userModel = angular.copy(userModel); 32 | scope.userSchema = angular.copy(userSchema); 33 | 34 | form = angular.element(template); 35 | $compile(form)(scope); 36 | scope.$digest(); 37 | }); 38 | }); 39 | 40 | it('creates a dynamic form element', function () { 41 | var htmlForm = form.find('form'); 42 | 43 | expect(htmlForm.length).toEqual(1); 44 | }); 45 | 46 | it('creates a dynamic form with a field for each field defined within the schema', function () { 47 | var fieldElements = form[0].querySelectorAll('.form-group'); 48 | expect(fieldElements.length).toEqual(Object.keys(userSchema.properties).length); 49 | }); 50 | 51 | it('transcludes content specified within the dynamic-form tag', function () { 52 | var transcludedContent = form[0].querySelector('.custom-content'); 53 | expect(transcludedContent).toBeDefined(); 54 | expect(transcludedContent.tagName).toEqual('P'); 55 | }); 56 | }); 57 | 58 | describe('dynamicForm controller', function () { 59 | var controller = null, scope = null; 60 | 61 | beforeEach(function() { 62 | module('dynamic-forms'); 63 | 64 | inject(function($controller, $rootScope, dynamicTemplates) { 65 | scope = $rootScope.$new(); 66 | scope.schema = angular.copy(userSchema); 67 | scope.model = angular.copy(userModel); 68 | scope.submit = function() { 69 | 70 | }; 71 | 72 | controller = $controller('dynamicFormController', { $scope: scope, dynamicTemplates: dynamicTemplates }); 73 | }); 74 | }); 75 | 76 | it('defines a "getFieldTemplate" function', function() { 77 | expect(controller.getFieldTemplate).toBeDefined(); 78 | }); 79 | 80 | it('gets the correct template when "fieldType" is specified', function() { 81 | var template = controller.getFieldTemplate('checkbox'); 82 | expect(template.indexOf('checkbox') > -1).toBeTruthy(); 83 | }); 84 | 85 | it('gets the correct template when "fieldType" is not specified, but "format" is defined on the form schema', function() { 86 | scope.schema.format = 'horizontal'; 87 | 88 | var template = controller.getFieldTemplate(null); 89 | expect(template.indexOf('col-sm-10') > -1).toBeTruthy(); 90 | }); 91 | 92 | it('gets the default template when fieldType is not specified', function() { 93 | var template = controller.getFieldTemplate(null); 94 | expect(template.indexOf('form-group') > -1).toBeTruthy(); 95 | expect(template.indexOf('col-sm-10') > -1).not.toBeTruthy(); 96 | expect(template.indexOf('checkbox') > -1).not.toBeTruthy(); 97 | }); 98 | 99 | it('defines an "onSubmit" function on the scope', function() { 100 | expect(controller.onSubmit).toBeDefined(); 101 | }); 102 | 103 | it('calls the registered submit expression when "onSubmit" is executed', function() { 104 | spyOn(scope, 'submit'); 105 | 106 | controller.onSubmit(); 107 | expect(scope.submit).toHaveBeenCalled(); 108 | }); 109 | }); 110 | }()); 111 | -------------------------------------------------------------------------------- /test/services/jsonSchemaService.spec.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | 'use strict'; 3 | 4 | describe('jsonSchema service', function () { 5 | var service, 6 | testSchema = { 7 | id: 'http://json-schema.org/demo/foobar', 8 | type: 'object', 9 | properties: { 10 | bar: { type: 'string' } 11 | } 12 | }, 13 | schemaWithLocalRef = { 14 | type: 'object', 15 | properties: { 16 | foo: { $ref: '#/definitions/foo' }, 17 | bar: { $ref: '#/definitions/bar' } 18 | }, 19 | definitions: { 20 | foo: { 21 | type: 'object', 22 | properties: { 23 | a: { type: 'string' }, 24 | b: { type: 'string' } 25 | } 26 | }, 27 | bar: { 28 | properties: { 29 | c: { type: 'string' }, 30 | d: { type: 'string' } 31 | } 32 | } 33 | } 34 | }; 35 | 36 | beforeEach(function () { 37 | module('dynamic-forms'); 38 | inject(function (jsonSchema) { 39 | service = jsonSchema; 40 | }); 41 | }); 42 | 43 | it('should define a isComplex function', function () { 44 | expect(service.isComplex).toBeDefined(); 45 | }); 46 | 47 | it('should define a "register" function', function () { 48 | expect(angular.isFunction(service.register)).toBeTruthy(); 49 | }); 50 | 51 | it('should define a "get" function', function () { 52 | expect(angular.isFunction(service.get)).toBeTruthy(); 53 | }); 54 | 55 | it('should define an "extend" function', function () { 56 | expect(angular.isFunction(service.extend)).toBeTruthy(); 57 | }); 58 | 59 | it('should define a "clear" function', function () { 60 | expect(angular.isFunction(service.clear)).toBeTruthy(); 61 | }); 62 | 63 | it('isComplex returns false for emtpy object', function () { 64 | expect(service.isComplex({})).not.toBeTruthy(); 65 | }); 66 | 67 | it('isComplex returns false for simple types', function () { 68 | expect(service.isComplex({ type: 'string' })).not.toBeTruthy(); 69 | }); 70 | 71 | it('isComplex returns true when type="object"', function () { 72 | expect(service.isComplex({ type: 'object' })).toBeTruthy(); 73 | }); 74 | 75 | it('isComplex returns true when schema has properties defined', function () { 76 | expect(service.isComplex({ properties: { firstName: { type: 'string' } } })).toBeTruthy(); 77 | }); 78 | 79 | it('"register" should register a new schema in the schema store when it has an "id" property defined', function () { 80 | service.clear(); 81 | service.register(testSchema); 82 | 83 | var schema = service.get(testSchema.id); 84 | 85 | expect(schema).toBeDefined(); 86 | expect(schema).toBe(testSchema); 87 | }); 88 | 89 | it('"register" should fail when the specified schema does not contain an "id" property', function () { 90 | var badSchema = {}, 91 | exceptionThrown = false; 92 | 93 | try { 94 | service.register(badSchema); 95 | } catch (e) { 96 | exceptionThrown = true; 97 | } 98 | 99 | expect(exceptionThrown).toBeTruthy(); 100 | }); 101 | 102 | it('"get" returns undefined when a schema cannot be found', function () { 103 | var schema = service.get('foobar'); 104 | expect(schema).not.toBeDefined(); 105 | }); 106 | 107 | it('"clear" clears the schema store', function () { 108 | service.clear(); 109 | service.register(testSchema); 110 | 111 | var schema = service.get(testSchema.id); 112 | 113 | expect(schema).toBeDefined(); 114 | 115 | service.clear(); 116 | schema = service.get(testSchema.id); 117 | expect(schema).not.toBeDefined(); 118 | }); 119 | 120 | it('"extend" extends a schema with a $ref pointer with the schema found in the schema store', function () { 121 | var newSchema = { $ref: testSchema.id }; 122 | 123 | service.clear(); 124 | service.register(testSchema); 125 | service.extend(newSchema); 126 | 127 | expect(newSchema.id).toEqual(testSchema.id); 128 | expect(newSchema.type).toEqual(testSchema.type); 129 | expect(newSchema.properties).toBe(testSchema.properties); 130 | }); 131 | 132 | it('"extend" extends a schema from the root document when the $ref pointer is a local path', function () { 133 | service.extend(schemaWithLocalRef.properties.foo, schemaWithLocalRef); 134 | 135 | expect(schemaWithLocalRef.properties.foo.properties).toBe(schemaWithLocalRef.definitions.foo.properties); 136 | }); 137 | 138 | it('"extend" does not extend a schema the the $ref pointer is not found', function() { 139 | var badSchema = { $ref: '#/definitions/notfound' }; 140 | 141 | service.extend(badSchema, schemaWithLocalRef); 142 | expect(Object.keys(badSchema).length).toEqual(1); 143 | }); 144 | 145 | it('"extend" does not extend a schema that does not have a $ref pointer', function() { 146 | var badSchema = { type: 'object' }; 147 | service.extend(badSchema); 148 | expect(Object.keys(badSchema).length).toEqual(1); 149 | }); 150 | }); 151 | }()); 152 | -------------------------------------------------------------------------------- /test/directives/dynamicEditorDirective.spec.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | 'use strict'; 3 | 4 | var objectSchema = { 5 | type: 'object', 6 | name: 'simpleUser', 7 | title: 'Simple User', 8 | properties: { 9 | firstName: { type: 'string', required: true, title: 'First Name' }, 10 | lastName: { type: 'string', required: true, title: 'Last Name' } 11 | } 12 | }, 13 | objectData = { 14 | firstName: 'Wallace', 15 | lastName: 'Breza' 16 | }, 17 | fieldSchema = { 18 | type: 'string', 19 | name: 'firstName', 20 | title: 'First Name', 21 | required: true 22 | }, 23 | complexObjectSchema = { 24 | title: 'Fancy Form', 25 | description: 'I am the fancy form description', 26 | type: 'object', 27 | properties: { 28 | name: { 29 | type: 'object', 30 | format: 'section', 31 | required: 'true', 32 | title: 'Full Name Info', 33 | description: 'Enter you full name', 34 | index: 15, 35 | properties: { 36 | firstName: { 37 | type: 'string', 38 | title: 'First Name', 39 | required: true, 40 | messages: { required: 'First Name is required' }, 41 | description: 'First Name Help Message', 42 | index: 10 43 | }, 44 | lastName: { 45 | type: 'string', 46 | title: 'Last Name', 47 | required: true, 48 | index: 20 49 | } 50 | } 51 | } 52 | } 53 | }, 54 | complexObjectData = { 55 | name: { 56 | firstName: 'Wallace', 57 | lastName: 'Breza' 58 | } 59 | }; 60 | 61 | describe('dynamicEditor Directive', function () { 62 | var template = '
', 63 | $$compile, $$rootScope; 64 | 65 | beforeEach(function () { 66 | module('dynamic-forms'); 67 | 68 | inject(function ($rootScope, $compile) { 69 | $$rootScope = $rootScope; 70 | $$compile = $compile; 71 | }); 72 | }); 73 | 74 | function getDynamicEditor(schema, model) { 75 | var container = angular.element(template), 76 | scope = $$rootScope.$new(); 77 | 78 | scope.schema = angular.copy(schema); 79 | scope.model = angular.copy(model); 80 | var editor = $$compile(container)(scope); 81 | scope.$digest(); 82 | 83 | return editor; 84 | } 85 | 86 | it('renders multiple fields for a complex object', function () { 87 | var objectEditor = getDynamicEditor(objectSchema); 88 | var inputElements = objectEditor[0].querySelectorAll('.form-group'); 89 | 90 | expect(inputElements.length).toEqual(Object.keys(objectSchema.properties).length); 91 | }); 92 | 93 | it('renders a single field for a simple object', function () { 94 | var fieldEditor = getDynamicEditor(fieldSchema); 95 | var inputElements = fieldEditor[0].querySelectorAll('.form-group'); 96 | 97 | expect(inputElements.length).toEqual(1); 98 | }); 99 | 100 | it('parent scope is updated for simple form', function () { 101 | var objectEditor = $(getDynamicEditor(objectSchema, objectData)), 102 | objectScope = angular.element(objectEditor.find('.ng-scope:first')).scope(), 103 | firstNameInput = objectEditor.find('input:first'), 104 | inputScope = angular.element(firstNameInput).scope(); 105 | 106 | inputScope.$apply(function () { 107 | inputScope.model = 'changed...'; 108 | }); 109 | 110 | var expected = firstNameInput.val(); 111 | expect(inputScope.model).toEqual(expected); 112 | expect(objectScope.model.firstName).toEqual(expected); 113 | }); 114 | 115 | it('parent scope is updated for complex form', function () { 116 | var objectEditor = $(getDynamicEditor(complexObjectSchema, complexObjectData)), 117 | objectScope = angular.element(objectEditor.find('.ng-scope:first')).scope(), 118 | firstNameInput = objectEditor.find('input:first'), 119 | inputScope = angular.element(firstNameInput).scope(); 120 | 121 | inputScope.$apply(function () { 122 | inputScope.model = 'changed...'; 123 | }); 124 | 125 | var expected = firstNameInput.val(); 126 | expect(inputScope.model).toEqual(expected); 127 | expect(objectScope.model.name.firstName).toEqual(expected); 128 | }); 129 | }); 130 | 131 | describe('dynamicEditor Controller', function () { 132 | var $$controller, $$rootScope, defaultController, scope; 133 | 134 | beforeEach(function () { 135 | module('dynamic-forms'); 136 | 137 | inject(function ($controller, $rootScope) { 138 | $$controller = $controller; 139 | $$rootScope = $rootScope; 140 | 141 | defaultController = getDynamicEditorController(objectSchema); 142 | }); 143 | }); 144 | 145 | function getDynamicEditorController(schema) { 146 | scope = $$rootScope.$new(); 147 | scope.schema = angular.copy(schema); 148 | 149 | return $$controller('dynamicEditorController', { $scope: scope }); 150 | } 151 | 152 | it('should be defined', function () { 153 | expect(defaultController).toBeDefined(); 154 | }); 155 | 156 | it('should define a getProperties function', function () { 157 | expect(defaultController.getProperties).toBeDefined(); 158 | }); 159 | 160 | it('getProperties function converts a schema\'s properties object into array with the same number of items', function () { 161 | var properties = defaultController.getProperties(); 162 | expect(properties.length).toEqual(Object.keys(objectSchema.properties).length); 163 | }); 164 | 165 | it('getProperties function converts an schema\'s properties into an array and sets the "name" as a new property within the schema', function () { 166 | var properties = defaultController.getProperties(); 167 | 168 | properties.forEach(function (property) { 169 | expect(property.name).toBeDefined(); 170 | expect(objectSchema.properties[property.name]).toBeDefined(); 171 | }); 172 | }); 173 | }); 174 | }()); 175 | -------------------------------------------------------------------------------- /test/directives/dynamicListDirective.spec.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 'use strict'; 3 | 4 | beforeEach(module('dynamic-forms')); 5 | 6 | describe('dynamicList Directive', function () { 7 | var $$compile, 8 | $$rootScope, 9 | defaultScope = { 10 | model: [], 11 | schema: { name: 'foo', type: 'array' } 12 | }; 13 | 14 | beforeEach(inject(function($compile, $rootScope) { 15 | $$compile = $compile; 16 | $$rootScope = $rootScope; 17 | })); 18 | 19 | function createForm(scope) { 20 | if (!scope) { 21 | scope = defaultScope; 22 | } 23 | 24 | var elementScope = $$rootScope.$new(), 25 | template = '
'; 26 | 27 | angular.extend(elementScope, scope); 28 | var element = $$compile(template)(elementScope); 29 | 30 | elementScope.$digest(); 31 | 32 | return element; 33 | } 34 | 35 | it('adds the list as a form control when form controller is available', function() { 36 | var form = createForm(), 37 | list = angular.element(form[0].querySelector('#dynamicList')), 38 | listScope = list.scope(); 39 | 40 | expect(listScope.form).toBeDefined(); 41 | expect(listScope.formField).toBeDefined(); 42 | expect(listScope.form[listScope.formField.$name]).toBeDefined(); 43 | }); 44 | 45 | it('removes the list from the form controls when the scope is destroyed', function() { 46 | var form = createForm(), 47 | list = angular.element(form[0].querySelector('#dynamicList')), 48 | listScope = list.scope(); 49 | 50 | expect(listScope.form[listScope.formField.$name]).toBeDefined(); 51 | listScope.$destroy(); 52 | expect(listScope.form[listScope.formField.$name]).not.toBeDefined(); 53 | }); 54 | }); 55 | 56 | describe('dynamicList Directive Controller', function() { 57 | var defaultController = null, 58 | scope = null, 59 | schemaWithMinItems = { type: 'array', minItems: 1 }, 60 | schemaWithMaxItems = { type: 'array', maxItems: 2 }, 61 | basicSchema = { type: 'array' }, 62 | $$controller = null, 63 | $$rootScope = null; 64 | 65 | beforeEach(inject(function($controller, $rootScope) { 66 | $$controller = $controller; 67 | $$rootScope = $rootScope; 68 | 69 | defaultController = createController({ model: [] }); 70 | })); 71 | 72 | function createController(model) { 73 | scope = $$rootScope.$new(); 74 | scope.schema = schemaWithMinItems; 75 | angular.extend(scope, model); 76 | 77 | return $$controller('dynamicListController', { $scope: scope }); 78 | } 79 | 80 | it('is defined', function () { 81 | expect(defaultController).toBeDefined(); 82 | }); 83 | 84 | it('defines an "addItem" function', function() { 85 | expect(defaultController.addItem).toBeDefined(); 86 | expect(angular.isFunction(defaultController.addItem)).toBeTruthy(); 87 | }); 88 | 89 | it('defines a "removeItem" function', function() { 90 | expect(defaultController.removeItem).toBeDefined(); 91 | expect(angular.isFunction(defaultController.removeItem)).toBeTruthy(); 92 | }); 93 | 94 | it('defines the scope "model" as an array if not already defined', function() { 95 | createController(); 96 | expect(scope.model).toBeDefined(); 97 | expect(scope.model instanceof Array).toBeTruthy(); 98 | }); 99 | 100 | it('adds a place holder item to meet the minimum validation requirement', function() { 101 | createController(); 102 | expect(scope.model.length).toEqual(schemaWithMinItems.minItems); 103 | }); 104 | 105 | it('addItem function adds a new empty item to the model array', function() { 106 | var testScope = { 107 | model: [{}], 108 | schema: { type: 'array' } 109 | }, 110 | controller = createController(testScope); 111 | 112 | expect(scope.model.length).toEqual(testScope.model.length); 113 | controller.addItem(); 114 | expect(scope.model.length).toEqual(testScope.model.length); 115 | }); 116 | 117 | it('removeItem function removes an item from the model array', function() { 118 | var testScope = { 119 | model: [{}], 120 | schema: { type: 'array' } 121 | }, 122 | controller = createController(testScope); 123 | 124 | expect(scope.model.length).toEqual(testScope.model.length); 125 | var removedItems = controller.removeItem(null, 0); 126 | expect(removedItems.length).toEqual(1); 127 | expect(scope.model.length).toEqual(testScope.model.length); 128 | }); 129 | 130 | it('removeItem does not remove any items when the specified index is out of bounds', function() { 131 | var testScope = { 132 | model: [{}], 133 | schema: { type: 'array' } 134 | }, 135 | controller = createController(testScope); 136 | 137 | expect(scope.model.length).toEqual(testScope.model.length); 138 | var removedItems = controller.removeItem(null, 100); 139 | expect(removedItems.length).toEqual(0); 140 | expect(scope.model.length).toEqual(testScope.model.length); 141 | }); 142 | 143 | it('canAddItem returns true when max items is not defined', function() { 144 | var testScope = { schema: basicSchema }, 145 | controller = createController(testScope); 146 | 147 | expect(controller.canAddItem()).toBeTruthy(); 148 | }); 149 | 150 | it('canAddItem returns true when item count is less than max items', function() { 151 | var testScope = { schema: schemaWithMaxItems, model: [1] }, 152 | controller = createController(testScope); 153 | 154 | expect(controller.canAddItem()).toBeTruthy(); 155 | }); 156 | 157 | it('canAddItem returns false when item count is greater than max items', function () { 158 | var testScope = { schema: schemaWithMaxItems, model: [1, 2, 3] }, 159 | controller = createController(testScope); 160 | 161 | expect(controller.canAddItem()).not.toBeTruthy(); 162 | }); 163 | 164 | it('canAddItem returns false when item count is equal to the max items', function () { 165 | var testScope = { schema: schemaWithMaxItems, model: [1, 2] }, 166 | controller = createController(testScope); 167 | 168 | expect(controller.canAddItem()).not.toBeTruthy(); 169 | }); 170 | 171 | it('canRemoveItem returns true when min items is not defined', function() { 172 | var testScope = { schema: basicSchema }, 173 | controller = createController(testScope); 174 | 175 | expect(controller.canRemoveItem()).toBeTruthy(); 176 | }); 177 | 178 | it('canRemoveItem returns true when item count is greater than the min items', function() { 179 | var testScope = { schema: schemaWithMinItems, model: [1,2] }, 180 | controller = createController(testScope); 181 | 182 | expect(controller.canRemoveItem()).toBeTruthy(); 183 | }); 184 | 185 | it('canRemoveItem returns false when the item count is less than min items', function () { 186 | var testScope = { schema: schemaWithMinItems, model: [] }, 187 | controller = createController(testScope); 188 | 189 | expect(controller.canRemoveItem()).not.toBeTruthy(); 190 | }); 191 | 192 | it('canRemoveItem returns false when the item count is equal to the min items', function () { 193 | var testScope = { schema: schemaWithMinItems, model: [1] }, 194 | controller = createController(testScope); 195 | 196 | expect(controller.canRemoveItem()).not.toBeTruthy(); 197 | }); 198 | }); 199 | }()); 200 | -------------------------------------------------------------------------------- /test/services/dynamicTemplatesProvider.spec.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | 'use strict'; 3 | 4 | describe('dynamicTemplates Service', function () { 5 | var dynamicTemplatesService, $$templateCache; 6 | 7 | beforeEach(function () { 8 | angular 9 | .module('dynamicTemplatesProviderTest', []) 10 | .config(function (dynamicTemplatesProvider) { 11 | // Used for tests below 12 | dynamicTemplatesProvider.registerTemplatePath('/app/custom-module/views'); // Gets appended to the end of the list 13 | dynamicTemplatesProvider.registerTemplatePath('/app/another-module/views', 0); // Gets inserted into first index 14 | }); 15 | 16 | module('dynamic-forms', 'dynamicTemplatesProviderTest'); 17 | 18 | inject(function (dynamicTemplates, $templateCache) { 19 | dynamicTemplatesService = dynamicTemplates; 20 | $$templateCache = $templateCache; 21 | }); 22 | }); 23 | 24 | it('should be defined', function () { 25 | expect(dynamicTemplatesService).toBeDefined(); 26 | }); 27 | 28 | it('defines a getTemplate function defined', function () { 29 | expect(dynamicTemplatesService.getTemplate).toBeDefined(); 30 | expect(typeof (dynamicTemplatesService.getTemplate)).toEqual('function'); 31 | }); 32 | 33 | describe('implementation', function () { 34 | it('returns a template when it has been cached in the templateCache', function () { 35 | var templateType = 'forms', 36 | dataType = 'default', 37 | template = dynamicTemplatesService.getTemplate(templateType, dataType); 38 | 39 | expect(template).toBeDefined(); 40 | expect(template).not.toBeNull(); 41 | expect(typeof (template)).toEqual('string'); 42 | }); 43 | 44 | it('returns null when the template is not found', function () { 45 | var templateType = 'forms', 46 | dataType = 'INVALID', 47 | template = dynamicTemplatesService.getTemplate(templateType, dataType); 48 | 49 | expect(template).not.toBeDefined(); 50 | }); 51 | 52 | it('getFormTemplate returns "default" template when template not found', function () { 53 | var expected = $$templateCache.get('/app/dynamic-forms/views/forms/default.html'); 54 | var template = dynamicTemplatesService.getFormTemplate('NOTFOUND'); 55 | 56 | expect(template).toEqual(expected); 57 | }); 58 | 59 | it('getFormTemplate can accept object input', function () { 60 | var expected = $$templateCache.get('/app/dynamic-forms/views/forms/horizontal.html'); 61 | var template = dynamicTemplatesService.getFormTemplate({ format: 'horizontal' }); 62 | 63 | expect(template).toEqual(expected); 64 | }); 65 | 66 | it('getEditorTemplate returns "property" template when template not found', function () { 67 | var expected = $$templateCache.get('/app/dynamic-forms/views/editors/property.html'); 68 | var template = dynamicTemplatesService.getEditorTemplate('NOTFOUND'); 69 | 70 | expect(template).toEqual(expected); 71 | }); 72 | 73 | it('getEditorTemplate can accept object input', function () { 74 | var expected = $$templateCache.get('/app/dynamic-forms/views/editors/section.html'); 75 | var template = dynamicTemplatesService.getEditorTemplate({ type: 'object', format: 'section' }); 76 | 77 | expect(template).toEqual(expected); 78 | }); 79 | 80 | it('getFieldTemplate returns "default" template when template not found', function () { 81 | var expected = $$templateCache.get('/app/dynamic-forms/views/fields/default.html'); 82 | var template = dynamicTemplatesService.getFieldTemplate('NOTFOUND'); 83 | 84 | expect(template).toEqual(expected); 85 | }); 86 | 87 | it('getFieldTemplate can accept object input', function () { 88 | var expected = $$templateCache.get('/app/dynamic-forms/views/fields/checkbox.html'); 89 | var template = dynamicTemplatesService.getFieldTemplate({ format: 'checkbox' }); 90 | 91 | expect(template).toEqual(expected); 92 | }); 93 | 94 | it('getFieldTemplate can accept string input', function () { 95 | var expected = $$templateCache.get('/app/dynamic-forms/views/fields/checkbox.html'); 96 | var template = dynamicTemplatesService.getFieldTemplate('checkbox'); 97 | 98 | expect(template).toEqual(expected); 99 | }); 100 | 101 | it('getTemplate search all registered template paths when not found in first registered path', function() { 102 | var customFormPath = '/app/custom-module/views/forms/fancy.html'; 103 | 104 | $$templateCache.put(customFormPath, '
Fancy form
'); 105 | var expected = $$templateCache.get(customFormPath); 106 | 107 | var template = dynamicTemplatesService.getTemplate('forms', 'fancy'); 108 | 109 | expect(template).toEqual(expected); 110 | }); 111 | 112 | it('getTemplate search will find the first template found within its registered template paths', function() { 113 | var customFormPath = '/app/another-module/views/forms/default.html'; 114 | $$templateCache.put(customFormPath, '
Overriden Default
'); 115 | var expected = $$templateCache.get(customFormPath); 116 | 117 | var template = dynamicTemplatesService.getTemplate('forms', 'default'); 118 | 119 | expect(template).toEqual(expected); 120 | }); 121 | }); 122 | }); 123 | 124 | describe('dynamicTemplates Provider', function () { 125 | var provider = null; 126 | 127 | beforeEach(function () { 128 | angular 129 | .module('dynamicTemplatesProviderTest', []) 130 | .config(function (dynamicTemplatesProvider) { 131 | provider = dynamicTemplatesProvider; 132 | }); 133 | 134 | module('dynamic-forms', 'dynamicTemplatesProviderTest'); 135 | inject(function () 136 | { }); // This is needed even thought it appears it doesn't do anything 137 | }); 138 | 139 | it('should be defined', function () { 140 | expect(provider).toBeDefined(); 141 | expect(provider).not.toBeNull(); 142 | }); 143 | 144 | it('should define a "getTemplatePaths" function', function () { 145 | expect(angular.isFunction(provider.getTemplatePaths)).toBeTruthy(); 146 | }); 147 | 148 | it('should define a "registerTemplatePath" function', function () { 149 | expect(angular.isFunction(provider.registerTemplatePath)).toBeTruthy(); 150 | }); 151 | 152 | it('should define a "clearTemplatePaths" function', function () { 153 | expect(angular.isFunction(provider.clearTemplatePaths)).toBeTruthy(); 154 | }); 155 | 156 | it('should contain an array of default registered template paths', function () { 157 | var templatePaths = provider.getTemplatePaths(); 158 | expect(templatePaths.length >= 1).toBeTruthy(); 159 | }); 160 | 161 | it('"registerTemplatePath" registers a new distinct template path', function () { 162 | var expectedPath = '/foo/bar', 163 | templatePaths = provider.getTemplatePaths(), 164 | origCount = templatePaths.length; 165 | 166 | provider.registerTemplatePath(expectedPath); 167 | provider.registerTemplatePath(expectedPath); 168 | provider.registerTemplatePath(expectedPath); 169 | 170 | templatePaths = provider.getTemplatePaths(); 171 | 172 | expect(templatePaths.length).toEqual(origCount + 1); 173 | expect(templatePaths.indexOf(expectedPath)).toBeGreaterThan(-1); 174 | }); 175 | 176 | it('"registerTemplatePath" will trim paths the end with forward slash', function () { 177 | var templatePaths = provider.getTemplatePaths(), 178 | origCount = templatePaths.length; 179 | 180 | provider.registerTemplatePath('/foo/bar'); 181 | provider.registerTemplatePath('/foo/bar/'); 182 | 183 | templatePaths = provider.getTemplatePaths(); 184 | 185 | expect(templatePaths.length).toEqual(origCount + 1); 186 | }); 187 | 188 | it('"registerTemplatePath" will add the template path at the specified index', function() { 189 | var expectedPath = 'another/path', 190 | index = 0; 191 | 192 | provider.registerTemplatePath(expectedPath, index); 193 | var templatePaths = provider.getTemplatePaths(); 194 | 195 | expect(templatePaths[index]).toEqual(expectedPath); 196 | }); 197 | 198 | it('"clearTemplatePaths" should clear the list of registered template paths', function () { 199 | var templatePaths = provider.getTemplatePaths(), 200 | origCount = templatePaths.length; 201 | 202 | provider.clearTemplatePaths(); 203 | templatePaths = provider.getTemplatePaths(); 204 | 205 | expect(templatePaths.length).toEqual(0); 206 | expect(origCount).toBeGreaterThan(templatePaths.length); 207 | }); 208 | }); 209 | }()); 210 | -------------------------------------------------------------------------------- /src/services/validationProvider.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | 'use strict'; 3 | 4 | /** 5 | * Instantiates the Angular ValidationProvider for the dynamic-forms module 6 | * 7 | * @constructor 8 | * @this {ValidationProvider} 9 | */ 10 | function ValidationProvider() { 11 | var validators = {}, 12 | validatorMapping = {}, 13 | provider = this; 14 | 15 | // Private Functions 16 | 17 | /** 18 | * Registers a validators to be globally available within the dynamic forms module 19 | * 20 | * @param {typeName} The name of the property used when defining the JSON schema 21 | * @param {options} A object map which contains additional metadata and linking functions used when applying validation rules 22 | * 23 | * @returns {object} The complete validator object 24 | */ 25 | function registerValidator(typeName, options) { 26 | if (typeof (validators[typeName]) === 'undefined') { 27 | validators[typeName] = {}; 28 | } 29 | 30 | // If validator property is not defined in the options, then assume it's the same name as the typeName that is being registered 31 | var validator = angular.extend(validators[typeName], { validator: typeName }, options, { name: typeName }); 32 | 33 | // Store a mapping to the validators for easy lookup by angular validation since they use different names for 34 | // validation attributes vs. JSON Schema standard 35 | validatorMapping[validator.validator] = validator; 36 | 37 | return validator; 38 | } 39 | 40 | /** 41 | * Apples validation rules to the specifed input element based on the schema configuration 42 | * 43 | * @param {inputElement} The inputElement to apply DOM transformations 44 | * @param {schema} The schema configuration which includes all validation rules 45 | */ 46 | function applyRules(inputElement, schema) { 47 | for (var key in schema) { 48 | var validator = validators[key]; 49 | if (!validator) { 50 | continue; 51 | } 52 | 53 | // Link function called below is responsible for appending angular validation 54 | // directive attributes to the form input elements 55 | if (angular.isFunction(validator.link)) { 56 | validator.link(inputElement, schema[key], schema); 57 | } 58 | } 59 | } 60 | 61 | /** 62 | * Monitors the scope, listens for validation errors and sets error messages 63 | * 64 | * @param {scope} The scope to monitor for changes 65 | * @param {fieldSchema} The field schema which contains all validation rules for the field 66 | * @param {formField} The form field within the angular formController that is linked to the fieldSchema 67 | */ 68 | function monitorField(scope, fieldSchema, formField) { 69 | scope.errorMessage = null; 70 | 71 | scope.$watch(function () { 72 | if (!formField.$invalid) { 73 | scope.errorKey = null; 74 | scope.errorMessage = null; 75 | return; 76 | } 77 | 78 | for (var key in formField.$error) { 79 | if (formField.$error[key] === true) { 80 | scope.errorKey = key; 81 | scope.errorMessage = getErrorMessage(fieldSchema, key); 82 | break; 83 | } 84 | } 85 | }); 86 | } 87 | 88 | /** 89 | * Get the error message for the specified validatorType for the fieldSchema 90 | * 91 | * @param {fieldSchema} The fieldSchema to find the validation message for 92 | * @param {validatorType} The type of validation failure that occurred 93 | * 94 | * @returns {string} The error message to display to the user for the specified validation failure. 95 | */ 96 | function getErrorMessage(fieldSchema, validatorType) { 97 | var errorMessage, 98 | validator = validatorMapping[validatorType]; 99 | 100 | if (validator) { 101 | errorMessage = (fieldSchema.messages && fieldSchema.messages[validator.name]) || validator.message; 102 | } 103 | 104 | return errorMessage || 'Enter a valid value'; 105 | } 106 | 107 | function getValidators() { 108 | return validators; 109 | } 110 | 111 | function getValidatorValue(config) { 112 | return typeof (config) === 'object' ? config.value : config; 113 | } 114 | 115 | /** 116 | * Registers the default validation rules that are globally available 117 | */ 118 | function registerDefaultValidators() { 119 | registerValidator('required', { 120 | link: function (inputElement) { 121 | inputElement.attr('required', 'required'); 122 | }, 123 | message: 'Field is required' 124 | }); 125 | 126 | registerValidator('minLength', { 127 | validator: 'minlength', 128 | link: function (inputElement, value) { 129 | var attrValue = getValidatorValue(value); 130 | 131 | if (typeof (attrValue) === 'number') { 132 | inputElement.attr('ng-minlength', getValidatorValue(value)); 133 | } 134 | }, 135 | message: 'Value is less than the allowed length' 136 | }); 137 | 138 | registerValidator('maxLength', { 139 | validator: 'maxlength', 140 | link: function (inputElement, value) { 141 | var attrValue = getValidatorValue(value); 142 | 143 | if (typeof (attrValue) === 'number') { 144 | inputElement.attr('ng-maxlength', getValidatorValue(value)); 145 | } 146 | }, 147 | message: 'Value is greater than the allowed length' 148 | }); 149 | 150 | registerValidator('pattern', { 151 | link: function (inputElement, pattern) { 152 | var attrValue = pattern instanceof RegExp ? pattern : pattern.value; 153 | inputElement.attr('ng-pattern', attrValue); 154 | }, 155 | message: 'Value does not match the allowed pattern' 156 | }); 157 | 158 | registerValidator('minimum', { 159 | validator: 'min', 160 | link: function (inputElement, value) { 161 | var attrValue = getValidatorValue(value); 162 | 163 | if (typeof (attrValue) === 'number') { 164 | inputElement.attr('min', attrValue); 165 | } 166 | }, 167 | message: 'Value is less than the allowed value' 168 | }); 169 | 170 | registerValidator('maximum', { 171 | validator: 'max', 172 | link: function (inputElement, value) { 173 | var attrValue = getValidatorValue(value); 174 | 175 | if (typeof (attrValue) === 'number') { 176 | inputElement.attr('max', attrValue); 177 | } 178 | }, 179 | message: 'Value is greater than the allowed value' 180 | }); 181 | 182 | registerValidator('range', { 183 | link: function (inputElement, config, schema) { 184 | schema.minimum = config.minimum; 185 | schema.maximum = config.maximum; 186 | 187 | validators.minimum.link(inputElement, schema.minimum, schema); 188 | validators.maximum.link(inputElement, schema.maximum, schema); 189 | }, 190 | message: 'Value is not within the expected range' 191 | }); 192 | 193 | registerValidator('minItems', { 194 | validator: 'minitems', 195 | link: function (element, value) { 196 | var attrValue = getValidatorValue(value); 197 | 198 | if (typeof (value) === 'number') { 199 | element.attr('data-min-items', attrValue); 200 | } 201 | }, 202 | message: 'Number of items is less than the allowed value' 203 | }); 204 | 205 | registerValidator('maxItems', { 206 | validator: 'maxitems', 207 | link: function (element, value) { 208 | var attrValue = getValidatorValue(value); 209 | 210 | if (typeof (value) === 'number') { 211 | element.attr('data-max-items', attrValue); 212 | } 213 | }, 214 | message: 'Number of items is greater than the allowed value' 215 | }); 216 | 217 | provider.registerValidator('email', { message: 'Enter a valid email address' }); 218 | provider.registerValidator('url', { message: 'Enter a valid url' }); 219 | provider.registerValidator('number', { message: 'Enter a valid number' }); 220 | provider.registerValidator('date', { message: 'Enter a valid date' }); 221 | } 222 | 223 | /** 224 | * Activates the provider and applies public functions 225 | */ 226 | function activate() { 227 | provider.$get = [function () { 228 | return { 229 | applyRules: applyRules, 230 | monitorField: monitorField, 231 | }; 232 | }]; 233 | 234 | provider.registerValidator = registerValidator; 235 | provider.getValidators = getValidators; 236 | 237 | registerDefaultValidators(); 238 | } 239 | 240 | activate(); 241 | } 242 | 243 | angular.module('dynamic-forms') 244 | .provider('validation', ValidationProvider); 245 | }()); 246 | -------------------------------------------------------------------------------- /dist/dynamic-forms.min.js: -------------------------------------------------------------------------------- 1 | !function(e){"use strict";e.module("dynamic-forms",[])}(angular),function(){"use strict";function e(e,n){function r(e){if(!e||e.length<1)return null;var n=e[0];return angular.isString(n)?n:n.format||n.type}function a(n){var r;if(arguments.length<2)return null;for(var a=1;a0||!1}function n(e){return o[e]}function t(e){if(!e.id)throw new Error("Schema does not specify an ID attribute");o[e.id]=e}function r(e,t){if(!angular.isDefined(e.$ref))return e;var r="#"===e.$ref[0]?a(e.$ref,t):n(e.$ref);return r&&angular.extend(e,r),e}function a(e,n){for(var t=e.substr(2).split("/"),r=n,a=0;a0)return t;for(var n in e.schema.properties){var r=angular.extend({},e.schema.properties[n],{name:n});t.push(r)}return t},n.isValid=function(){return e.form.$valid},n.hasError=function(){return e.form.$invalid&&e.form.$dirty}}angular.module("dynamic-forms").directive("dynamicEditor",["$compile","dynamicTemplates","jsonSchema","validation",e]).controller("dynamicEditorController",["$scope",n])}(),function(){"use strict";function e(e){var n=this;n.showError=function(){var n=e.formField;return!!(n&&n.$invalid&&n.$dirty)},n.showSuccess=function(){var n=e.formField;return!!(n&&n.$valid&&n.$dirty)},n.hasError=function(){var n=e.formField;return!(!e.errorMessage||!n.$dirty)},n.hasSuccess=function(){var n=e.formField;return!(!n.$valid||!e.model&&!n.$dirty)}}function n(e,n,t){return{restrict:"E",replace:!0,require:"?^dynamicForm",controller:"dynamicFieldController",controllerAs:"field",link:function(n,r,a,i){var o=i?i.getFieldTemplate(n.schema.fieldType):t.getFieldTemplate(n.schema),l=angular.element(o);r.replaceWith(l),e(l)(n)}}}angular.module("dynamic-forms").controller("dynamicFieldController",["$scope",e]).directive("dynamicField",["$compile","validation","dynamicTemplates",n])}(),function(){"use strict";function e(e,n){return{restrict:"E",replace:!0,transclude:!0,scope:{schema:"=",model:"=ngModel",submit:"&"},controller:"dynamicFormController",controllerAs:"dynamicForm",link:function(t,r,a,i,o){var l=e.getFormTemplate(t.schema),m=angular.element(l);r.append(m),n(m,o)(t),t.form=m.controller("form"),t.form||(t.form=m.find("form").controller("form"))}}}function n(e,n,t){var r=this;r.onSubmit=function(){e.submit({$form:e.form,$model:e.model})},r.getFieldTemplate=function(t){return n.getFieldTemplate(t||e.schema.format||"default")},r.setupSchema=function(n){angular.isDefined(n.$ref)&&t.extend(n,e.schema)}}angular.module("dynamic-forms").directive("dynamicForm",["dynamicTemplates","$compile",e]).controller("dynamicFormController",["$scope","dynamicTemplates","jsonSchema",n])}(),function(){"use strict";function e(e,n,t,r){return{restrict:"E",replace:!0,require:"?^form",link:function(a,i,o,l){var m=a.schema.name+"-"+a.$id,s=e.getTemplate("editors",a.schema.format,a.schema.type,"string");s=t(s)(a);var c=angular.element(s);c.attr({id:m,name:m}),r.applyRules(c,a.schema),i.replaceWith(c),n(c)(a),l&&(a.form=l,a.formField=l[m],a.formField&&r.monitorField(a,a.schema,a.formField))}}}angular.module("dynamic-forms").directive("dynamicInput",["dynamicTemplates","$compile","$interpolate","validation",e])}(),function(e){"use strict";function n(e){return{restrict:"E",replace:!0,require:["?^form","ngModel"],transclude:!0,template:"
",controller:"dynamicListController",controllerAs:"dynamicList",link:function(n,t,r,a){var i=a[0],o=a[1];i&&(n.form=i,o.$name=n.schema.name+"-"+n.$id,i.$addControl(o),n.formField=i[o.$name],n.formField&&e.monitorField(n,n.schema,n.formField)),n.$on("$destroy",function(){i.$removeControl(o)})}}}function t(n){function t(){if(n.model===e&&(n.model=[]),angular.isDefined(n.schema.minItems)&&n.model.lengthn.schema.minItems},t()}angular.module("dynamic-forms").directive("dynamicList",["validation",n]).controller("dynamicListController",["$scope",t])}(),function(){"use strict";function e(){return{restrict:"A",require:"?ngModel",link:function(e,n,t,r){if(r){var a=parseInt(t.maxItems,10);if(!isNaN(a)){var i=function(e){var n=!!(e&&e.length<=a);return r.$setValidity("maxitems",n),e};e.$watchCollection(t.ngModel,function(e){angular.isDefined(e)&&i(r.$modelValue)}),r.$formatters.push(i),r.$parsers.unshift(i)}}}}}angular.module("dynamic-forms").directive("maxItems",[e])}(),function(){"use strict";function e(){return{restrict:"A",require:"?ngModel",link:function(e,n,t,r){if(r){var a=parseInt(t.minItems,10);if(!isNaN(a)){var i=function(e){var n=!!(e&&e.length>=a);return r.$setValidity("minitems",n),e};e.$watchCollection(t.ngModel,function(e){angular.isDefined(e)&&i(r.$modelValue)}),r.$formatters.push(i),r.$parsers.unshift(i)}}}}}angular.module("dynamic-forms").directive("minItems",[e])}(),angular.module("dynamic-forms").run(["$templateCache",function(e){e.put("/app/dynamic-forms/views/editors/array.html",'\n\n

{{formField.$error.message}}

\n \n
    \n
  • \n \n
    \n \n
    \n
    • \n
\n'),e.put("/app/dynamic-forms/views/editors/bool.html",'\n'),e.put("/app/dynamic-forms/views/editors/date.html",'\n'),e.put("/app/dynamic-forms/views/editors/dropdown.html",'\n'),e.put("/app/dynamic-forms/views/editors/email.html",'\n'),e.put("/app/dynamic-forms/views/editors/integer.html",'\n'),e.put("/app/dynamic-forms/views/editors/multilineText.html",'\n'),e.put("/app/dynamic-forms/views/editors/number.html",'\n'),e.put("/app/dynamic-forms/views/editors/object.html",'\n
\n \n
'),e.put("/app/dynamic-forms/views/editors/password.html",'\n'),e.put("/app/dynamic-forms/views/editors/property.html",'\n'),e.put("/app/dynamic-forms/views/editors/richText.html",'\n'),e.put("/app/dynamic-forms/views/editors/section.html",'\n
\n
{{schema.title}}
\n
\n

{{schema.description}}

\n \n
\n
'),e.put("/app/dynamic-forms/views/editors/string.html",'\n'),e.put("/app/dynamic-forms/views/editors/uri.html",'\n'),e.put("/app/dynamic-forms/views/fields/checkbox.html",'\n
\n \n
'),e.put("/app/dynamic-forms/views/fields/default.html",'\n
\n * \n \n

{{field.errorMessage}}

\n
'),e.put("/app/dynamic-forms/views/fields/horizontal.html",'\n
\n *\n
\n \n

{{field.errorMessage}}

\n
\n
'),e.put("/app/dynamic-forms/views/forms/default.html",'\n
\n
\n \n
\n
\n
'),e.put("/app/dynamic-forms/views/forms/horizontal.html",'\n
\n

{{schema.title}}

\n

{{schema.description}}

\n
\n
\n \n
\n
\n
\n
\n
\n
\n
\n
')}]); -------------------------------------------------------------------------------- /test/services/validationProvider.spec.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 'use strict'; 3 | 4 | describe('validation service', function() { 5 | var validationService = null; 6 | 7 | beforeEach(function() { 8 | module('dynamic-forms'); 9 | inject(function(validation) { 10 | validationService = validation; 11 | }); 12 | }); 13 | 14 | it('should be defined', function() { 15 | expect(validationService).toBeDefined(); 16 | }); 17 | 18 | it('should define a monitorField function', function() { 19 | expect(validationService.monitorField).toBeDefined(); 20 | expect(typeof (validationService.monitorField)).toEqual('function'); 21 | }); 22 | 23 | it('should define an applyRules function', function() { 24 | expect(validationService.applyRules).toBeDefined(); 25 | expect(typeof (validationService.applyRules)).toEqual('function'); 26 | }); 27 | 28 | it('applyRules add validation directive attributes to an element', function() { 29 | var schema = { name: 'foo', required: true, minLength: 4, maxLength: 16 }; 30 | 31 | var inputElement = angular.element(''); 32 | 33 | validationService.applyRules(inputElement, schema); 34 | 35 | expect(inputElement.attr('required')).toBeDefined(); 36 | expect(inputElement.attr('ng-minlength')).toBeDefined(); 37 | expect(inputElement.attr('ng-maxlength')).toBeDefined(); 38 | }); 39 | 40 | it('monitorField sets the error message when a validation fails', inject(function($rootScope) { 41 | var fieldSchema = { name: 'foo', dataType: 'text', validations: { required: true, minLength: 4, maxLength: 16 } }; 42 | var formField = { $error: { required: true }, $invalid: true }; 43 | 44 | var scope = $rootScope.$new(); 45 | scope.schema = fieldSchema; 46 | 47 | expect(scope.errorMessage).toBeUndefined(); 48 | validationService.monitorField(scope, fieldSchema, formField); 49 | scope.$digest(); 50 | 51 | expect(scope.errorMessage).not.toBeNull(); 52 | expect(scope.errorMessage.length).toBeGreaterThan(0); 53 | })); 54 | 55 | it('monitorField removes the error message when there are no validation errors', inject(function($rootScope) { 56 | var fieldSchema = { name: 'foo', dataType: 'text', validations: { required: true, minLength: 4, maxLength: 16 } }; 57 | var formField = { $error: { required: true }, $invalid: true }; 58 | 59 | var scope = $rootScope.$new(); 60 | scope.schema = fieldSchema; 61 | 62 | validationService.monitorField(scope, fieldSchema, formField); 63 | scope.$digest(); 64 | 65 | expect(scope.errorMessage).not.toBeNull(); 66 | expect(scope.errorMessage.length).toBeGreaterThan(0); 67 | 68 | formField.$invalid = false; 69 | formField.$error.required = false; 70 | scope.$digest(); 71 | 72 | expect(scope.errorMessage).toBeNull(); 73 | })); 74 | 75 | describe('Default Validators', function() { 76 | var inputElement = null; 77 | 78 | beforeEach(function() { 79 | inputElement = angular.element(''); 80 | }); 81 | 82 | describe('(required validator)', function() { 83 | it('should set the required attribute on the input element', function() { 84 | var schema = { name: 'foo', required: true }; 85 | validationService.applyRules(inputElement, schema); 86 | 87 | expect(inputElement.attr('required')).toBeDefined(); 88 | }); 89 | }); 90 | 91 | describe('(minLength validator)', function() { 92 | it('should set the ng-minlength attribute on the input element and it should be equal to the specified value', function() { 93 | var schema = { name: 'foo', minLength: 4 }; 94 | validationService.applyRules(inputElement, schema); 95 | var attrValue = inputElement.attr('ng-minlength'); 96 | 97 | expect(attrValue).toBeDefined(); 98 | expect(parseInt(attrValue, 10)).toEqual(schema.minLength); 99 | }); 100 | 101 | it('should not set the "ng-minlength" attribute on the input element when the value is not a number', function() { 102 | var schema = { name: 'foo', minLength: 'bar' }; 103 | validationService.applyRules(inputElement, schema); 104 | var attrValue = inputElement.attr('ng-minlength'); 105 | 106 | expect(attrValue).not.toBeDefined(); 107 | }); 108 | }); 109 | 110 | describe('(maxLength validator)', function() { 111 | it('should set the ng-maxlength attribute on the input element and it should be equal to the specified value', function() { 112 | var schema = { name: 'foo', maxLength: 16 }; 113 | validationService.applyRules(inputElement, schema); 114 | var attrValue = inputElement.attr('ng-maxlength'); 115 | 116 | expect(attrValue).toBeDefined(); 117 | expect(parseInt(attrValue, 10)).toEqual(schema.maxLength); 118 | }); 119 | 120 | it('should not set the "ng-maxlength" attribute on the input element when the value is not a number', function () { 121 | var schema = { name: 'foo', maxLength: 'bar' }; 122 | validationService.applyRules(inputElement, schema); 123 | var attrValue = inputElement.attr('ng-maxlength'); 124 | 125 | expect(attrValue).not.toBeDefined(); 126 | }); 127 | }); 128 | 129 | describe('(pattern validator)', function() { 130 | it('should set the ng-pattern attribute on the input element and it should be equal to the specified value', function() { 131 | var schema = { name: 'foo', pattern: /.*?/ }; 132 | validationService.applyRules(inputElement, schema); 133 | var attrValue = inputElement.attr('ng-pattern'); 134 | 135 | expect(attrValue).toBeDefined(); 136 | expect(attrValue).toEqual(schema.pattern.toString()); 137 | }); 138 | }); 139 | 140 | describe('(min validator)', function() { 141 | it('should set the "min" attribute on the input element and it should be equal to the specified value', function() { 142 | var schema = { name: 'foo', minimum: 2 }; 143 | validationService.applyRules(inputElement, schema); 144 | var attrValue = inputElement.attr('min'); 145 | 146 | expect(attrValue).toBeDefined(); 147 | expect(parseInt(attrValue, 10)).toEqual(schema.minimum); 148 | }); 149 | 150 | it('should not add the "min" attribute when the specified value is not numeric', function() { 151 | var schema = { name: 'foo', minimum: 'bar' }; 152 | validationService.applyRules(inputElement, schema); 153 | var attrValue = inputElement.attr('min'); 154 | 155 | expect(attrValue).not.toBeDefined(); 156 | }); 157 | }); 158 | 159 | describe('(max validator)', function() { 160 | it('should set the "max" attribute on the input element and it should be equal to the specified value', function() { 161 | var schema = { name: 'foo', maximum: 32 }; 162 | validationService.applyRules(inputElement, schema); 163 | var attrValue = inputElement.attr('max'); 164 | 165 | expect(attrValue).toBeDefined(); 166 | expect(parseInt(attrValue, 10)).toEqual(schema.maximum); 167 | }); 168 | 169 | it('should not add the "max" attribute when the specified value is not numeric', function () { 170 | var schema = { name: 'foo', maximum: 'bar' }; 171 | validationService.applyRules(inputElement, schema); 172 | var attrValue = inputElement.attr('max'); 173 | 174 | expect(attrValue).not.toBeDefined(); 175 | }); 176 | }); 177 | 178 | describe('(range validator)', function() { 179 | it('should set the "min" and "max" attributes on the input element and it should be equal to the specified values', function() { 180 | var schema = { name: 'foo', range: { minimum: 8, maximum: 64 } }; 181 | validationService.applyRules(inputElement, schema); 182 | var minValue = inputElement.attr('min'), 183 | maxValue = inputElement.attr('max'); 184 | 185 | expect(minValue).toBeDefined(); 186 | expect(maxValue).toBeDefined(); 187 | expect(parseInt(minValue, 10)).toEqual(schema.range.minimum); 188 | expect(parseInt(maxValue, 10)).toEqual(schema.range.maximum); 189 | }); 190 | 191 | it('should not set the "min" and "max" attributes on the input element when the value is not a number', function() { 192 | var schema = { name: 'foo', range: { minimum: 'foo', maximum: 'bar' } }; 193 | validationService.applyRules(inputElement, schema); 194 | var minValue = inputElement.attr('min'), 195 | maxValue = inputElement.attr('max'); 196 | 197 | expect(minValue).not.toBeDefined(); 198 | expect(maxValue).not.toBeDefined(); 199 | }); 200 | }); 201 | 202 | describe('(minItems validator)', function() { 203 | it('should set the "min-items" attributs on the element and it should be equal to the specified value', function() { 204 | var schema = { name: 'foo', minItems: 2 }; 205 | validationService.applyRules(inputElement, schema); 206 | var minItemsValue = inputElement.attr('data-min-items'); 207 | 208 | expect(minItemsValue).toBeDefined(); 209 | expect(parseInt(minItemsValue, 10)).toEqual(schema.minItems); 210 | }); 211 | 212 | it('should not set the "min-items" attribute when the value is not a number', function() { 213 | var schema = { name: 'foo', minItems: 'bar' }; 214 | validationService.applyRules(inputElement, schema); 215 | var minItemsValue = inputElement.attr('data-min-items'); 216 | 217 | expect(minItemsValue).not.toBeDefined(); 218 | }); 219 | }); 220 | 221 | describe('(maxItems validator)', function() { 222 | it('should set the "max-items" attribute on the element and it should be equal to the specified value', function () { 223 | var schema = { name: 'foo', maxItems: 2 }; 224 | validationService.applyRules(inputElement, schema); 225 | var maxItemsValue = inputElement.attr('data-max-items'); 226 | 227 | expect(maxItemsValue).toBeDefined(); 228 | expect(parseInt(maxItemsValue, 10)).toEqual(schema.maxItems); 229 | }); 230 | 231 | it('should not set the "max-items" attribute when the value is not a number', function () { 232 | var schema = { name: 'foo', maxItems: 'bar' }; 233 | validationService.applyRules(inputElement, schema); 234 | var maxItemsValue = inputElement.attr('data-max-items'); 235 | 236 | expect(maxItemsValue).not.toBeDefined(); 237 | }); 238 | }); 239 | }); 240 | }); 241 | 242 | describe('validationProvider', function() { 243 | var provider = null; 244 | 245 | beforeEach(function() { 246 | angular 247 | .module('validationProviderTest', []) 248 | .config(function(validationProvider) { 249 | provider = validationProvider; 250 | }); 251 | 252 | module('dynamic-forms', 'validationProviderTest'); 253 | inject(function () { }); // This is needed even thought it appears it doesn't do anything 254 | }); 255 | 256 | it('should be defined', function() { 257 | expect(provider).toBeDefined(); 258 | expect(provider).not.toBeNull(); 259 | }); 260 | 261 | it('should contain many default registered validators', function() { 262 | var registeredValidators = provider.getValidators(); 263 | expect(Object.keys(registeredValidators).length).toBeGreaterThan(0); 264 | }); 265 | 266 | it('should define a registerValidator function', function() { 267 | expect(provider.registerValidator).toBeDefined(); 268 | expect(typeof (provider.registerValidator)).toEqual('function'); 269 | }); 270 | 271 | it('should define a getValidators function', function() { 272 | expect(provider.getValidators).toBeDefined(); 273 | expect(typeof (provider.getValidators)).toEqual('function'); 274 | }); 275 | 276 | it('should register a new validator when calling registerValidator method', function() { 277 | var validatorName = 'customValidator', 278 | newValidator = { 279 | link: function(inputElement) { 280 | inputElement.attr('ng-custom-attr', 'foobar'); 281 | }, 282 | message: 'This is the default validation message' 283 | }; 284 | 285 | var validators = provider.getValidators(); 286 | 287 | expect(validators.customValidator).not.toBeDefined(); 288 | provider.registerValidator(validatorName, newValidator); 289 | expect(validators.customValidator).toBeDefined(); 290 | }); 291 | 292 | it('should extend / modify an existing validator when calling registerValidator method', function() { 293 | var validatorName = 'customValidator', 294 | newValidator = { message: 'Original Message' }, 295 | validators = provider.getValidators(); 296 | 297 | // Register initial validator 298 | provider.registerValidator(validatorName, newValidator); 299 | expect(validators[validatorName].message).toEqual(newValidator.message); 300 | expect(validators[validatorName].link).not.toBeDefined(); 301 | 302 | // Extend the validators 303 | provider.registerValidator(validatorName, { link: function() {} }); 304 | 305 | // Ensure both properties are still set 306 | expect(validators[validatorName].message).toEqual(newValidator.message); 307 | expect(validators[validatorName].link).toBeDefined(); 308 | }); 309 | }); 310 | }()); 311 | -------------------------------------------------------------------------------- /dist/dynamic-forms.js: -------------------------------------------------------------------------------- 1 | (function (angular) { 2 | 'use strict'; 3 | 4 | angular.module('dynamic-forms', []); 5 | }(angular)); 6 | 7 | (function () { 8 | 'use strict'; 9 | 10 | var templatePaths = []; 11 | 12 | /** 13 | * Instantiates the DynamicTemplate Service 14 | * 15 | * @constructor 16 | * @this {DynamicTemplateService} 17 | */ 18 | function DynamicTemplatesService($templateCache, jsonSchema) { 19 | function getTemplateName(args) { 20 | if (!args || args.length < 1) { 21 | return null; 22 | } 23 | 24 | var arg = args[0]; 25 | return angular.isString(arg) ? arg : (arg.format || arg.type); 26 | } 27 | 28 | /** 29 | * Get the angular HTML template for the specified templateType and dataType 30 | * 31 | * @param {templateType} The type of template to search for 32 | * @param {templateName} 1 or more template names to search for within the template type 33 | * 34 | * @returns {string} The HTML template that matches the specified values, otherwise undefined. 35 | */ 36 | function getTemplate(templateType) { 37 | var template; 38 | 39 | if (arguments.length < 2) { 40 | return null; 41 | } 42 | 43 | for (var i = 1; i < arguments.length; i++) { 44 | var templateName = arguments[i]; 45 | 46 | for (var j = 0; j < templatePaths.length; j++) { 47 | var templatePath = templatePaths[j] + '/' + templateType + '/' + templateName + '.html'; 48 | template = $templateCache.get(templatePath); 49 | 50 | if (template) { 51 | break; 52 | } 53 | } 54 | 55 | if (template) { 56 | break; 57 | } 58 | } 59 | 60 | return template; 61 | } 62 | 63 | function getFormTemplate(formSchema) { 64 | return getTemplate('forms', formSchema.format, formSchema.type, 'default'); 65 | } 66 | 67 | function getEditorTemplate(editorSchema) { 68 | var isComplex = jsonSchema.isComplex(editorSchema); 69 | 70 | return isComplex ? getTemplate('editors', editorSchema.format, editorSchema.type, 'object') 71 | : getTemplate('editors', 'property'); 72 | } 73 | 74 | function getFieldTemplate() { 75 | var templateName = getTemplateName(arguments); 76 | return getTemplate('fields', templateName, 'default'); 77 | } 78 | 79 | return { 80 | getTemplate: getTemplate, 81 | getFormTemplate: getFormTemplate, 82 | getEditorTemplate: getEditorTemplate, 83 | getFieldTemplate: getFieldTemplate 84 | }; 85 | } 86 | 87 | /** 88 | * Instantiates the DynamicTemplate Provider 89 | * 90 | * @constructor 91 | * @this {DynamicTemplateProvider} 92 | */ 93 | function DynamicTemplatesProvider() { 94 | var provider = this; 95 | 96 | function trimPath(path) { 97 | if (path[path.length - 1] === '/') { 98 | path = path.substr(0, path.length - 1); 99 | } 100 | 101 | return path; 102 | } 103 | 104 | function registerTemplatePath(path, index) { 105 | if (!angular.isDefined(index)) { 106 | index = templatePaths.length; 107 | } 108 | 109 | if (templatePaths.indexOf(path) === -1) { 110 | templatePaths.splice(index, 0, trimPath(path)); 111 | } 112 | } 113 | 114 | function clearTemplatePaths() { 115 | templatePaths.length = 0; 116 | } 117 | 118 | function registerDefaultTemplatePaths() { 119 | registerTemplatePath('/app/dynamic-forms/views'); 120 | } 121 | 122 | function getTemplatePaths() { 123 | return templatePaths; 124 | } 125 | 126 | function activate() { 127 | provider.$get = ['$templateCache', 'jsonSchema', DynamicTemplatesService]; 128 | 129 | provider.registerTemplatePath = registerTemplatePath; 130 | provider.clearTemplatePaths = clearTemplatePaths; 131 | provider.getTemplatePaths = getTemplatePaths; 132 | 133 | registerDefaultTemplatePaths(); 134 | } 135 | 136 | activate(); 137 | } 138 | 139 | angular.module('dynamic-forms') 140 | .provider('dynamicTemplates', DynamicTemplatesProvider); 141 | }()); 142 | 143 | (function () { 144 | 'use strict'; 145 | 146 | function JsonSchemaService() { 147 | var schemaStore = {}; 148 | 149 | function isComplex(schema) { 150 | return (schema.type === 'object' || schema.type === 'array') || ((schema.properties && Object.keys(schema.properties).length > 0) || false); 151 | } 152 | 153 | function getSchema(pointer) { 154 | //TODO: if the pointer is the URI and the URI is not in the cache, then attempt to download and add to cache 155 | 156 | return schemaStore[pointer]; 157 | } 158 | 159 | function registerSchema(schema) { 160 | if (!schema.id) { 161 | throw new Error('Schema does not specify an ID attribute'); 162 | } 163 | 164 | schemaStore[schema.id] = schema; 165 | } 166 | 167 | function extendSchema(schema, rootSchema) { 168 | if (!angular.isDefined(schema.$ref)) { 169 | return schema; 170 | } 171 | 172 | var referencedSchema = schema.$ref[0] === '#' ? getDocumentSchema(schema.$ref, rootSchema) 173 | : getSchema(schema.$ref); 174 | 175 | if (referencedSchema) { 176 | angular.extend(schema, referencedSchema); 177 | } 178 | 179 | return schema; 180 | } 181 | 182 | /** 183 | * Searches the specified schema for a reference pointer 184 | * 185 | * @param {pointer} the JSON path to search for 186 | * @param {schema} the schema to search 187 | */ 188 | function getDocumentSchema(pointer, schema) { 189 | var pathParts = pointer.substr(2).split('/'), 190 | currentNode = schema; 191 | 192 | for (var i = 0; i < pathParts.length; i++) { 193 | currentNode = currentNode[pathParts[i]]; 194 | 195 | if (!angular.isDefined(currentNode)) { 196 | return null; 197 | } 198 | } 199 | 200 | return currentNode; 201 | } 202 | 203 | function clearSchemaStore() { 204 | schemaStore = {}; 205 | } 206 | 207 | return { 208 | isComplex: isComplex, 209 | get: getSchema, 210 | register: registerSchema, 211 | extend: extendSchema, 212 | clear: clearSchemaStore 213 | }; 214 | } 215 | 216 | angular.module('dynamic-forms') 217 | .factory('jsonSchema', [JsonSchemaService]); 218 | }()); 219 | 220 | (function () { 221 | 'use strict'; 222 | 223 | /** 224 | * Instantiates the Angular ValidationProvider for the dynamic-forms module 225 | * 226 | * @constructor 227 | * @this {ValidationProvider} 228 | */ 229 | function ValidationProvider() { 230 | var validators = {}, 231 | validatorMapping = {}, 232 | provider = this; 233 | 234 | // Private Functions 235 | 236 | /** 237 | * Registers a validators to be globally available within the dynamic forms module 238 | * 239 | * @param {typeName} The name of the property used when defining the JSON schema 240 | * @param {options} A object map which contains additional metadata and linking functions used when applying validation rules 241 | * 242 | * @returns {object} The complete validator object 243 | */ 244 | function registerValidator(typeName, options) { 245 | if (typeof (validators[typeName]) === 'undefined') { 246 | validators[typeName] = {}; 247 | } 248 | 249 | // If validator property is not defined in the options, then assume it's the same name as the typeName that is being registered 250 | var validator = angular.extend(validators[typeName], { validator: typeName }, options, { name: typeName }); 251 | 252 | // Store a mapping to the validators for easy lookup by angular validation since they use different names for 253 | // validation attributes vs. JSON Schema standard 254 | validatorMapping[validator.validator] = validator; 255 | 256 | return validator; 257 | } 258 | 259 | /** 260 | * Apples validation rules to the specifed input element based on the schema configuration 261 | * 262 | * @param {inputElement} The inputElement to apply DOM transformations 263 | * @param {schema} The schema configuration which includes all validation rules 264 | */ 265 | function applyRules(inputElement, schema) { 266 | for (var key in schema) { 267 | var validator = validators[key]; 268 | if (!validator) { 269 | continue; 270 | } 271 | 272 | // Link function called below is responsible for appending angular validation 273 | // directive attributes to the form input elements 274 | if (angular.isFunction(validator.link)) { 275 | validator.link(inputElement, schema[key], schema); 276 | } 277 | } 278 | } 279 | 280 | /** 281 | * Monitors the scope, listens for validation errors and sets error messages 282 | * 283 | * @param {scope} The scope to monitor for changes 284 | * @param {fieldSchema} The field schema which contains all validation rules for the field 285 | * @param {formField} The form field within the angular formController that is linked to the fieldSchema 286 | */ 287 | function monitorField(scope, fieldSchema, formField) { 288 | scope.errorMessage = null; 289 | 290 | scope.$watch(function () { 291 | if (!formField.$invalid) { 292 | scope.errorKey = null; 293 | scope.errorMessage = null; 294 | return; 295 | } 296 | 297 | for (var key in formField.$error) { 298 | if (formField.$error[key] === true) { 299 | scope.errorKey = key; 300 | scope.errorMessage = getErrorMessage(fieldSchema, key); 301 | break; 302 | } 303 | } 304 | }); 305 | } 306 | 307 | /** 308 | * Get the error message for the specified validatorType for the fieldSchema 309 | * 310 | * @param {fieldSchema} The fieldSchema to find the validation message for 311 | * @param {validatorType} The type of validation failure that occurred 312 | * 313 | * @returns {string} The error message to display to the user for the specified validation failure. 314 | */ 315 | function getErrorMessage(fieldSchema, validatorType) { 316 | var errorMessage, 317 | validator = validatorMapping[validatorType]; 318 | 319 | if (validator) { 320 | errorMessage = (fieldSchema.messages && fieldSchema.messages[validator.name]) || validator.message; 321 | } 322 | 323 | return errorMessage || 'Enter a valid value'; 324 | } 325 | 326 | function getValidators() { 327 | return validators; 328 | } 329 | 330 | function getValidatorValue(config) { 331 | return typeof (config) === 'object' ? config.value : config; 332 | } 333 | 334 | /** 335 | * Registers the default validation rules that are globally available 336 | */ 337 | function registerDefaultValidators() { 338 | registerValidator('required', { 339 | link: function (inputElement) { 340 | inputElement.attr('required', 'required'); 341 | }, 342 | message: 'Field is required' 343 | }); 344 | 345 | registerValidator('minLength', { 346 | validator: 'minlength', 347 | link: function (inputElement, value) { 348 | var attrValue = getValidatorValue(value); 349 | 350 | if (typeof (attrValue) === 'number') { 351 | inputElement.attr('ng-minlength', getValidatorValue(value)); 352 | } 353 | }, 354 | message: 'Value is less than the allowed length' 355 | }); 356 | 357 | registerValidator('maxLength', { 358 | validator: 'maxlength', 359 | link: function (inputElement, value) { 360 | var attrValue = getValidatorValue(value); 361 | 362 | if (typeof (attrValue) === 'number') { 363 | inputElement.attr('ng-maxlength', getValidatorValue(value)); 364 | } 365 | }, 366 | message: 'Value is greater than the allowed length' 367 | }); 368 | 369 | registerValidator('pattern', { 370 | link: function (inputElement, pattern) { 371 | var attrValue = pattern instanceof RegExp ? pattern : pattern.value; 372 | inputElement.attr('ng-pattern', attrValue); 373 | }, 374 | message: 'Value does not match the allowed pattern' 375 | }); 376 | 377 | registerValidator('minimum', { 378 | validator: 'min', 379 | link: function (inputElement, value) { 380 | var attrValue = getValidatorValue(value); 381 | 382 | if (typeof (attrValue) === 'number') { 383 | inputElement.attr('min', attrValue); 384 | } 385 | }, 386 | message: 'Value is less than the allowed value' 387 | }); 388 | 389 | registerValidator('maximum', { 390 | validator: 'max', 391 | link: function (inputElement, value) { 392 | var attrValue = getValidatorValue(value); 393 | 394 | if (typeof (attrValue) === 'number') { 395 | inputElement.attr('max', attrValue); 396 | } 397 | }, 398 | message: 'Value is greater than the allowed value' 399 | }); 400 | 401 | registerValidator('range', { 402 | link: function (inputElement, config, schema) { 403 | schema.minimum = config.minimum; 404 | schema.maximum = config.maximum; 405 | 406 | validators.minimum.link(inputElement, schema.minimum, schema); 407 | validators.maximum.link(inputElement, schema.maximum, schema); 408 | }, 409 | message: 'Value is not within the expected range' 410 | }); 411 | 412 | registerValidator('minItems', { 413 | validator: 'minitems', 414 | link: function (element, value) { 415 | var attrValue = getValidatorValue(value); 416 | 417 | if (typeof (value) === 'number') { 418 | element.attr('data-min-items', attrValue); 419 | } 420 | }, 421 | message: 'Number of items is less than the allowed value' 422 | }); 423 | 424 | registerValidator('maxItems', { 425 | validator: 'maxitems', 426 | link: function (element, value) { 427 | var attrValue = getValidatorValue(value); 428 | 429 | if (typeof (value) === 'number') { 430 | element.attr('data-max-items', attrValue); 431 | } 432 | }, 433 | message: 'Number of items is greater than the allowed value' 434 | }); 435 | 436 | provider.registerValidator('email', { message: 'Enter a valid email address' }); 437 | provider.registerValidator('url', { message: 'Enter a valid url' }); 438 | provider.registerValidator('number', { message: 'Enter a valid number' }); 439 | provider.registerValidator('date', { message: 'Enter a valid date' }); 440 | } 441 | 442 | /** 443 | * Activates the provider and applies public functions 444 | */ 445 | function activate() { 446 | provider.$get = [function () { 447 | return { 448 | applyRules: applyRules, 449 | monitorField: monitorField, 450 | }; 451 | }]; 452 | 453 | provider.registerValidator = registerValidator; 454 | provider.getValidators = getValidators; 455 | 456 | registerDefaultValidators(); 457 | } 458 | 459 | activate(); 460 | } 461 | 462 | angular.module('dynamic-forms') 463 | .provider('validation', ValidationProvider); 464 | }()); 465 | 466 | (function () { 467 | 'use strict'; 468 | 469 | function DynamicEditorDirective($compile, dynamicTemplates, jsonSchema, validation) { 470 | return { 471 | restrict: 'E', 472 | replace: true, 473 | require: '?^dynamicForm', 474 | scope: { 475 | schema: '=', 476 | model: '=ngModel' 477 | }, 478 | controller: 'dynamicEditorController', 479 | controllerAs: 'editor', 480 | link: function (scope, element, attrs, dynamicFormCtrl) { 481 | if (dynamicFormCtrl) { 482 | // Inspects the schema for embedded references and expands as needed 483 | dynamicFormCtrl.setupSchema(scope.schema); 484 | } 485 | 486 | var isComplex = jsonSchema.isComplex(scope.schema), 487 | editorTemplate = dynamicTemplates.getEditorTemplate(scope.schema), 488 | editorElement = angular.element(editorTemplate); 489 | 490 | if (isComplex) { 491 | // Required to prevent recursive stackoverflow 492 | scope.schema.format = null; 493 | 494 | // Define an empty model when the model has not been defined 495 | if (scope.schema.type === 'object' && !scope.model) { 496 | scope.model = {}; 497 | } 498 | } 499 | 500 | element.replaceWith(editorElement); 501 | validation.applyRules(editorElement, scope.schema); 502 | $compile(editorElement)(scope); 503 | 504 | // Find the first form within the template and set it as part of the scope. 505 | scope.form = editorElement.controller('form'); 506 | if (!scope.form && editorElement[0].querySelector) { 507 | scope.form = angular.element(editorElement[0].querySelector('.ng-form')).controller('form'); 508 | } 509 | } 510 | }; 511 | } 512 | 513 | function DynamicEditorController($scope) { 514 | var vm = this, 515 | propertyArray = []; 516 | 517 | /** 518 | * Get and transforms the JSON schema properties from object map to an array 519 | * Also merges in the key of the object as the "name" within the property 520 | * Bound from the form HTML view 521 | * 522 | * @returns And array of JSON schema properties 523 | */ 524 | vm.getProperties = function () { 525 | if (propertyArray.length > 0) { 526 | return propertyArray; 527 | } 528 | 529 | for (var key in $scope.schema.properties) { 530 | var property = angular.extend({}, $scope.schema.properties[key], { name: key }); 531 | propertyArray.push(property); 532 | } 533 | 534 | return propertyArray; 535 | }; 536 | 537 | /** 538 | * Determines if the form is in a valid state 539 | * 540 | * @returns true if valid, otherwise false 541 | */ 542 | vm.isValid = function () { 543 | return $scope.form.$valid; 544 | }; 545 | 546 | /** 547 | * Determines if the form has errors that should be displayed 548 | * If the field starts in an invalid state, waits for it to become dirty 549 | * 550 | * @returns true if has errors, otherwise false. 551 | */ 552 | vm.hasError = function () { 553 | return $scope.form.$invalid && $scope.form.$dirty; 554 | }; 555 | } 556 | 557 | angular.module('dynamic-forms') 558 | .directive('dynamicEditor', ['$compile', 'dynamicTemplates', 'jsonSchema', 'validation', DynamicEditorDirective]) 559 | .controller('dynamicEditorController', ['$scope', DynamicEditorController]); 560 | }()); 561 | 562 | (function () { 563 | 'use strict'; 564 | 565 | function DynamicFieldController($scope) { 566 | var vm = this; 567 | 568 | vm.showError = function () { 569 | var field = $scope.formField; 570 | return !!(field && field.$invalid && field.$dirty); 571 | }; 572 | 573 | vm.showSuccess = function () { 574 | var field = $scope.formField; 575 | return !!(field && field.$valid && field.$dirty); 576 | }; 577 | 578 | vm.hasError = function() { 579 | var field = $scope.formField; 580 | return !!($scope.errorMessage && field.$dirty); 581 | }; 582 | 583 | vm.hasSuccess = function() { 584 | var field = $scope.formField; 585 | return !!(field.$valid && ($scope.model || field.$dirty)); 586 | }; 587 | } 588 | 589 | function DynamicFieldDirective($compile, validation, dynamicTemplates) { 590 | 591 | return { 592 | restrict: 'E', 593 | replace: true, 594 | require: '?^dynamicForm', 595 | controller: 'dynamicFieldController', 596 | controllerAs: 'field', 597 | link: function (scope, element, attrs, dynamicForm) { 598 | var template = dynamicForm ? dynamicForm.getFieldTemplate(scope.schema.fieldType) : dynamicTemplates.getFieldTemplate(scope.schema), 599 | fieldElement = angular.element(template); 600 | 601 | element.replaceWith(fieldElement); 602 | $compile(fieldElement)(scope); 603 | } 604 | }; 605 | } 606 | 607 | angular.module('dynamic-forms') 608 | .controller('dynamicFieldController', ['$scope', DynamicFieldController]) 609 | .directive('dynamicField', ['$compile', 'validation', 'dynamicTemplates', DynamicFieldDirective]); 610 | 611 | }()); 612 | 613 | (function () { 614 | 'use strict'; 615 | 616 | function DynamicFormDirective(dynamicTemplates, $compile) { 617 | return { 618 | restrict: 'E', 619 | replace: true, 620 | transclude: true, 621 | scope: { 622 | schema: '=', 623 | model: '=ngModel', 624 | submit: '&' 625 | }, 626 | controller: 'dynamicFormController', 627 | controllerAs: 'dynamicForm', 628 | link: function (scope, element, attrs, ctrl, transclude) { 629 | var template = dynamicTemplates.getFormTemplate(scope.schema), 630 | formElement = angular.element(template); 631 | 632 | element.append(formElement); 633 | $compile(formElement, transclude)(scope); 634 | 635 | // Find the first form within the template and set it as part of the scope. 636 | scope.form = formElement.controller('form'); 637 | if (!scope.form) { 638 | scope.form = formElement.find('form').controller('form'); 639 | } 640 | } 641 | }; 642 | } 643 | 644 | function DynamicFormController($scope, dynamicTemplates, jsonSchema) { 645 | var vm = this; 646 | 647 | vm.onSubmit = function () { 648 | $scope.submit({ '$form': $scope.form, '$model': $scope.model }); 649 | }; 650 | 651 | vm.getFieldTemplate = function (fieldType) { 652 | return dynamicTemplates.getFieldTemplate(fieldType || $scope.schema.format || 'default'); 653 | }; 654 | 655 | vm.setupSchema = function (editorSchema) { 656 | if (angular.isDefined(editorSchema.$ref)) { 657 | jsonSchema.extend(editorSchema, $scope.schema); 658 | } 659 | }; 660 | } 661 | 662 | angular.module('dynamic-forms') 663 | .directive('dynamicForm', ['dynamicTemplates', '$compile', DynamicFormDirective]) 664 | .controller('dynamicFormController', ['$scope', 'dynamicTemplates', 'jsonSchema', DynamicFormController]); 665 | }()); 666 | 667 | (function () { 668 | 'use strict'; 669 | 670 | function DynamicInputDirective(dynamicTemplates, $compile, $interpolate, validation) { 671 | return { 672 | restrict: 'E', 673 | replace: true, 674 | require: '?^form', 675 | link: function (scope, element, attrs, formCtrl) { 676 | // Get the template 677 | var elementId = scope.schema.name + '-' + scope.$id, 678 | template = dynamicTemplates.getTemplate('editors', scope.schema.format, scope.schema.type, 'string'); 679 | 680 | template = $interpolate(template)(scope); 681 | 682 | var inputElement = angular.element(template); 683 | 684 | inputElement.attr({ 685 | id: elementId, 686 | name: elementId 687 | }); 688 | 689 | validation.applyRules(inputElement, scope.schema); 690 | element.replaceWith(inputElement); 691 | $compile(inputElement)(scope); 692 | 693 | if (formCtrl) { 694 | scope.form = formCtrl; 695 | scope.formField = formCtrl[elementId]; 696 | if (scope.formField) { 697 | validation.monitorField(scope, scope.schema, scope.formField); 698 | } 699 | } 700 | } 701 | }; 702 | } 703 | 704 | angular.module('dynamic-forms') 705 | .directive('dynamicInput', ['dynamicTemplates', '$compile', '$interpolate', 'validation', DynamicInputDirective]); 706 | }()); 707 | 708 | (function (undefined) { 709 | 'use strict'; 710 | 711 | function DynamicListDirective(validation) { 712 | return { 713 | restrict: 'E', 714 | replace: true, 715 | require: ['?^form', 'ngModel'], 716 | transclude: true, 717 | template: '
', 718 | controller: 'dynamicListController', 719 | controllerAs: 'dynamicList', 720 | link: function (scope, element, attrs, ctrls) { 721 | var formCtrl = ctrls[0], 722 | ngModelCtrl = ctrls[1]; 723 | 724 | if (formCtrl) { 725 | scope.form = formCtrl; 726 | ngModelCtrl.$name = scope.schema.name + '-' + scope.$id; 727 | formCtrl.$addControl(ngModelCtrl); 728 | scope.formField = formCtrl[ngModelCtrl.$name]; 729 | 730 | if (scope.formField) { 731 | validation.monitorField(scope, scope.schema, scope.formField); 732 | } 733 | } 734 | 735 | scope.$on('$destroy', function () { 736 | formCtrl.$removeControl(ngModelCtrl); 737 | }); 738 | } 739 | }; 740 | } 741 | 742 | function DynamicListController($scope) { 743 | var vm = this; 744 | 745 | function activate() { 746 | if ($scope.model === undefined) { 747 | $scope.model = []; 748 | } 749 | 750 | if (angular.isDefined($scope.schema.minItems) && $scope.model.length < $scope.schema.minItems) { 751 | for (var i = $scope.model.length; i < $scope.schema.minItems; i++) { 752 | vm.addItem(); 753 | } 754 | } 755 | } 756 | 757 | vm.addItem = function () { 758 | $scope.model.push({}); 759 | }; 760 | 761 | vm.removeItem = function (item, index) { 762 | return $scope.model.splice(index, 1); 763 | }; 764 | 765 | vm.canAddItem = function() { 766 | return angular.isDefined($scope.schema.maxItems) ? ($scope.model.length < $scope.schema.maxItems) : true; 767 | }; 768 | 769 | vm.canRemoveItem = function() { 770 | return angular.isDefined($scope.schema.minItems) ? ($scope.model.length > $scope.schema.minItems) : true; 771 | }; 772 | 773 | activate(); 774 | } 775 | 776 | angular.module('dynamic-forms') 777 | .directive('dynamicList', ['validation', DynamicListDirective]) 778 | .controller('dynamicListController', ['$scope', DynamicListController]); 779 | }()); 780 | 781 | (function () { 782 | 'use strict'; 783 | 784 | function MaxItemsDirective() { 785 | return { 786 | restrict: 'A', 787 | require: '?ngModel', 788 | link: function (scope, element, attrs, ngModel) { 789 | if (!ngModel) { 790 | return; 791 | } 792 | 793 | var maxItems = parseInt(attrs.maxItems, 10); 794 | if (isNaN(maxItems)) { 795 | return; 796 | } 797 | 798 | var validator = function (model) { 799 | var isValid = !!(model && model.length <= maxItems); 800 | ngModel.$setValidity('maxitems', isValid); 801 | 802 | return model; 803 | }; 804 | 805 | scope.$watchCollection(attrs.ngModel, function (newValue) { 806 | if (!angular.isDefined(newValue)) { 807 | return; 808 | } 809 | 810 | validator(ngModel.$modelValue); 811 | }); 812 | 813 | ngModel.$formatters.push(validator); 814 | ngModel.$parsers.unshift(validator); 815 | } 816 | }; 817 | } 818 | 819 | angular.module('dynamic-forms') 820 | .directive('maxItems', [MaxItemsDirective]); 821 | }()); 822 | 823 | (function () { 824 | 'use strict'; 825 | 826 | function MinItemsDirective() { 827 | return { 828 | restrict: 'A', 829 | require: '?ngModel', 830 | link: function (scope, element, attrs, ngModel) { 831 | if (!ngModel) { 832 | return; 833 | } 834 | 835 | var minItems = parseInt(attrs.minItems, 10); 836 | if (isNaN(minItems)) { 837 | return; 838 | } 839 | 840 | var validator = function (model) { 841 | var isValid = !!(model && model.length >= minItems); 842 | ngModel.$setValidity('minitems', isValid); 843 | 844 | return model; 845 | }; 846 | 847 | scope.$watchCollection(attrs.ngModel, function (newValue) { 848 | if (!angular.isDefined(newValue)) { 849 | return; 850 | } 851 | 852 | validator(ngModel.$modelValue); 853 | }); 854 | 855 | ngModel.$formatters.push(validator); 856 | ngModel.$parsers.unshift(validator); 857 | } 858 | }; 859 | } 860 | 861 | angular.module('dynamic-forms') 862 | .directive('minItems', [MinItemsDirective]); 863 | }()); 864 | 865 | angular.module("dynamic-forms").run(["$templateCache", function($templateCache) {$templateCache.put("/app/dynamic-forms/views/editors/array.html","\n\n

{{formField.$error.message}}

\n \n
    \n
  • \n \n
    \n \n
    \n
    • \n
\n"); 866 | $templateCache.put("/app/dynamic-forms/views/editors/bool.html","\n"); 867 | $templateCache.put("/app/dynamic-forms/views/editors/date.html","\n"); 868 | $templateCache.put("/app/dynamic-forms/views/editors/dropdown.html","\n"); 869 | $templateCache.put("/app/dynamic-forms/views/editors/email.html","\n"); 870 | $templateCache.put("/app/dynamic-forms/views/editors/integer.html","\n"); 871 | $templateCache.put("/app/dynamic-forms/views/editors/multilineText.html","\n"); 872 | $templateCache.put("/app/dynamic-forms/views/editors/number.html","\n"); 873 | $templateCache.put("/app/dynamic-forms/views/editors/object.html","\n
\n \n
"); 874 | $templateCache.put("/app/dynamic-forms/views/editors/password.html","\n"); 875 | $templateCache.put("/app/dynamic-forms/views/editors/property.html","\n"); 876 | $templateCache.put("/app/dynamic-forms/views/editors/richText.html","\n"); 877 | $templateCache.put("/app/dynamic-forms/views/editors/section.html","\n
\n
{{schema.title}}
\n
\n

{{schema.description}}

\n \n
\n
"); 878 | $templateCache.put("/app/dynamic-forms/views/editors/string.html","\n"); 879 | $templateCache.put("/app/dynamic-forms/views/editors/uri.html","\n"); 880 | $templateCache.put("/app/dynamic-forms/views/fields/checkbox.html","\n
\n \n
"); 881 | $templateCache.put("/app/dynamic-forms/views/fields/default.html","\n
\n * \n \n

{{field.errorMessage}}

\n
"); 882 | $templateCache.put("/app/dynamic-forms/views/fields/horizontal.html","\n
\n *\n
\n \n

{{field.errorMessage}}

\n
\n
"); 883 | $templateCache.put("/app/dynamic-forms/views/forms/default.html","\n
\n
\n \n
\n
\n
"); 884 | $templateCache.put("/app/dynamic-forms/views/forms/horizontal.html","\n
\n

{{schema.title}}

\n

{{schema.description}}

\n
\n
\n \n
\n
\n
\n
\n
\n
\n
\n
");}]); --------------------------------------------------------------------------------