` tags
14 | since they are no longer needed.
15 |
16 | Install
17 | -------
18 | ```sh
19 | npm install angular-schema-form-bootstrap
20 | ```
21 | **note** we do not recommend using bower as even the bower team recommend using yarn and webpack now.
22 |
23 | The package.json 'main' script is this library alone and unminified so that minification can be handled by webpack or another script bundler.
24 |
25 | **Note when using webpack angular-schema-form versions match this repo so ASF 1.0.0-alpha.4 works with Bootstrap 1.0.0-alpha.4**.
26 |
27 | If you are unsure, check the bundled version in this repo and see which versions are used as both repo now include a version header.
28 |
29 | Look for this:
30 | ```js
31 | /*!
32 | * angular-schema-form
33 | * @version 1.0.0-alpha.4
34 | * @date Mon, 17 Apr 2017 08:55:13 GMT
35 | * @link https://github.com/json-schema-form/angular-schema-form
36 | * @license MIT
37 | * Copyright (c) 2014-2017 JSON Schema Form
38 | */
39 | ```
40 |
41 | Old versions pre-alpha work with 0.8.13 or ASF, but the alphas should be more stable than those versions with more bugs fixed.
42 |
43 | If you include `angular-schema-form-bootstrap-bundled.min.js` you **DO NOT** need to include angular-schema-form, it is now **embedded** within the bundled above file. If you wish to include the files separately you can still use `angular-schema-form-bootstrap.js` or `angular-schema-form-bootstrap.min.js`
44 |
45 | Future
46 | ------
47 | Using the new builder opens up for a lot of optimization. Primarily we can get rid of a lot of small
48 | watches by using build helpers. For instance, slapping on a `sf-changed` directive *only* if the
49 | form definition has an `onChange` option.
50 |
51 | Developer Install
52 | -----------------
53 | ```sh
54 | bower install
55 | npm install
56 | ```
57 | Then read package.json for the available scripts.
58 | **Note** templates are compiled so the templates script must be run after changes.
59 |
--------------------------------------------------------------------------------
/test/protractor/specs/validation-messages.js:
--------------------------------------------------------------------------------
1 | /* global browser, it, describe, element, by */
2 |
3 | describe('Schema Form validation messages', function() {
4 |
5 | describe('#string', function() {
6 | var URL = 'http://localhost:8080/examples/bootstrap-example.html#/86fb7505a8ab6a43bc70';
7 |
8 | it('should not complain if it gets a normal string', function() {
9 | browser.get(URL);
10 | var input = element.all(by.css('form[name=ngform] input')).first();
11 | input.sendKeys('string');
12 |
13 | expect(input.getAttribute('value')).toEqual('string');
14 | expect(input.evaluate('ngModel.$valid')).toEqual(true);
15 |
16 | });
17 |
18 |
19 | var validationMessageTestBuider = function(nr, value, validationMessage) {
20 | it('should say "' + validationMessage + '" when input is ' + value, function() {
21 | browser.get(URL);
22 | var input = element.all(by.css('form[name=ngform] input')).get(nr);
23 | input.sendKeys(value);
24 |
25 | var message = element.all(by.css('form[name=ngform] div[sf-message]')).get(nr);
26 | expect(input.evaluate('ngModel.$valid')).toEqual(false);
27 | expect(message.getText()).toEqual(validationMessage);
28 |
29 | });
30 | };
31 |
32 | var stringTests = {
33 | 's': 'String is too short (1 chars), minimum 3',
34 | 'tooo long string': 'String is too long (11 chars), maximum 10',
35 | 'foo 66': 'String does not match pattern: ^[a-zA-Z ]+$'
36 | };
37 |
38 | Object.keys(stringTests).forEach(function(value) {
39 | validationMessageTestBuider(0, value, stringTests[value]);
40 | });
41 |
42 |
43 | var integerTests = {
44 | '3': '3 is less than the allowed minimum of 6',
45 | '66': '66 is greater than the allowed maximum of 50',
46 | '11': 'Value is not a multiple of 3',
47 | // Chrome no longer lets you input anything but numbers in a type="number" input.
48 | 'aaa': 'Required' //'Value is not a valid number'
49 | };
50 |
51 | Object.keys(integerTests).forEach(function(value) {
52 | validationMessageTestBuider(1, value, integerTests[value]);
53 | });
54 |
55 |
56 | it('should say "Required" when fields are required', function() {
57 | browser.get(URL);
58 | element.all(by.css('form[name=ngform]')).submit();
59 | var input = element.all(by.css('form[name=ngform] input')).get(1);
60 |
61 | var message = element.all(by.css('form[name=ngform] div[sf-message]')).get(1);
62 | expect(input.evaluate('ngModel.$valid')).toEqual(false);
63 | expect(message.getText()).toEqual('Required');
64 |
65 | });
66 | });
67 | });
68 |
--------------------------------------------------------------------------------
/src/bootstrap/default.html:
--------------------------------------------------------------------------------
1 |
58 |
--------------------------------------------------------------------------------
/examples/data/titlemaps.json:
--------------------------------------------------------------------------------
1 | {
2 | "model": {
3 | "select": "a",
4 | "array": ["b"]
5 | },
6 | "schema": {
7 | "type": "object",
8 | "properties": {
9 | "select": {
10 | "title": "Select without titleMap",
11 | "type": "string",
12 | "enum": ["a","b","c"]
13 | },
14 | "select2": {
15 | "title": "Select with titleMap (old style)",
16 | "type": "string",
17 | "enum": ["a","b","c"]
18 | },
19 | "noenum": { "type": "string", "title": "No enum, but forms says it's a select" },
20 | "array": {
21 | "title": "Array with enum defaults to 'checkboxes'",
22 | "type": "array",
23 | "items": {
24 | "type": "string",
25 | "enum": ["a","b","c"]
26 | }
27 | },
28 | "array2": {
29 | "title": "Array with titleMap",
30 | "type": "array",
31 | "default": ["b","c"],
32 | "items": {
33 | "type": "string",
34 | "enum": ["a","b","c"]
35 | }
36 | },
37 | "radios": {
38 | "title": "Basic radio button example",
39 | "type": "string",
40 | "enum": ["a","b","c"]
41 | },
42 | "radiobuttons": {
43 | "title": "Radio buttons used to switch a boolean",
44 | "type": "boolean",
45 | "default": false
46 | }
47 | }
48 | },
49 | "form": [
50 | "select",
51 | {
52 | "key": "select2",
53 | "type": "select",
54 | "placeholder": "Please choose",
55 | "titleMap": {
56 | "a": "A",
57 | "b": "B",
58 | "c": "C"
59 | }
60 | },
61 | {
62 | "key": "noenum",
63 | "type": "select",
64 | "placeholder": "Please choose",
65 | "titleMap": [
66 | { "value":"a", "name": "A" },
67 | { "value":"b", "name":"B" },
68 | { "value":"c", "name":"C" }
69 | ]
70 | },
71 | "array",
72 | {
73 | "key": "array2",
74 | "type": "checkboxes",
75 | "titleMap": [
76 | { "value":"a", "name": "A" },
77 | { "value":"b", "name":"B" },
78 | { "value":"c", "name":"C" }
79 | ]
80 | },
81 | {
82 | "key": "radios",
83 | "type": "radios",
84 | "titleMap": [
85 | { "value":"c", "name": "C" },
86 | { "value":"b", "name":"B" },
87 | { "value":"a", "name":"A" }
88 | ]
89 | },
90 | {
91 | "key":"radiobuttons",
92 | "type": "radiobuttons",
93 | "titleMap": [
94 | {"value": false, "name": "No way"},
95 | {"value": true, "name": "OK"}
96 | ]
97 | }
98 | ]
99 | }
100 |
--------------------------------------------------------------------------------
/test/protractor/specs/custom-validation.js:
--------------------------------------------------------------------------------
1 | describe('Schema Form custom validators', function() {
2 | it('should have a form with content', function() {
3 | browser.get('http://localhost:8080/examples/custom-validators.html');
4 |
5 | expect(element(by.css('form')).getInnerHtml()).not.toEqual('');
6 | });
7 |
8 | describe('#name', function() {
9 | it('should not complain if it gets a normal name', function() {
10 | browser.get('http://localhost:8080/examples/custom-validators.html');
11 | var input = element.all(by.css('form input')).first();
12 | input.sendKeys('Joe Schmoe');
13 |
14 | expect(input.getAttribute('value')).toEqual('Joe Schmoe');
15 | expect(input.evaluate('ngModel.$valid')).toEqual(true);
16 |
17 | });
18 |
19 | it('should complain if it gets a "Bob" as a name', function() {
20 | browser.get('http://localhost:8080/examples/custom-validators.html');
21 | var input = element.all(by.css('form input')).first();
22 | input.sendKeys('Bob');
23 |
24 | expect(input.getAttribute('value')).toEqual('Bob');
25 | expect(input.evaluate('ngModel.$valid')).toEqual(false);
26 | });
27 | });
28 |
29 | describe('#email', function() {
30 | it('should not complain if it gets a normal email', function() {
31 | browser.get('http://localhost:8080/examples/custom-validators.html');
32 | var input = element.all(by.css('form input')).get(1);
33 | input.sendKeys('foo@mailinator.com');
34 |
35 | expect(input.getAttribute('value')).toEqual('foo@mailinator.com');
36 | expect(input.evaluate('ngModel.$valid')).toEqual(true);
37 |
38 | });
39 |
40 | it('should complain if it gets a my email', function() {
41 | browser.get('http://localhost:8080/examples/custom-validators.html');
42 | var input = element.all(by.css('form input')).get(1);
43 | input.sendKeys('david.lgj@gmail.com');
44 |
45 | expect(input.getAttribute('value')).toEqual('david.lgj@gmail.com');
46 | expect(input.evaluate('ngModel.$valid')).toEqual(false);
47 | });
48 | });
49 |
50 | describe('#comment', function() {
51 | it('should not complain if it gets a normal email', function() {
52 | browser.get('http://localhost:8080/examples/custom-validators.html');
53 | var input = element.all(by.css('form input')).get(1);
54 | input.sendKeys('foo@mailinator.com');
55 |
56 | expect(input.getAttribute('value')).toEqual('foo@mailinator.com');
57 | expect(input.evaluate('ngModel.$valid')).toEqual(true);
58 |
59 | });
60 |
61 | it('should complain if it gets a my email', function() {
62 | browser.get('http://localhost:8080/examples/custom-validators.html');
63 | var input = element.all(by.css('form input')).get(1);
64 | input.sendKeys('david.lgj@gmail.com');
65 |
66 | expect(input.getAttribute('value')).toEqual('david.lgj@gmail.com');
67 | expect(input.evaluate('ngModel.$valid')).toEqual(false);
68 | });
69 | });
70 |
71 |
72 |
73 |
74 | });
75 |
--------------------------------------------------------------------------------
/src/bootstrap/tabarray.html:
--------------------------------------------------------------------------------
1 |
53 |
54 |
72 |
73 |
74 |
--------------------------------------------------------------------------------
/examples/data/array.json:
--------------------------------------------------------------------------------
1 | {
2 | "schema": {
3 | "type": "object",
4 | "title": "Comment",
5 | "required": ["comments"],
6 | "properties": {
7 | "tags": {
8 | "type": "array",
9 | "maxItems": 4,
10 | "minItems": 2,
11 | "uniqueItems": true,
12 | "items": {
13 | "type": "string"
14 | }
15 | },
16 | "comments": {
17 | "type": "array",
18 | "maxItems": 2,
19 | "items": {
20 | "type": "object",
21 | "properties": {
22 | "name": {
23 | "title": "Name",
24 | "type": "string"
25 | },
26 | "email": {
27 | "title": "Email",
28 | "type": "string",
29 | "pattern": "^\\S+@\\S+$",
30 | "description": "Email will be used for evil."
31 | },
32 | "spam": {
33 | "title": "Spam",
34 | "type": "boolean",
35 | "default": true
36 | },
37 | "comment": {
38 | "title": "Comment",
39 | "type": "string",
40 | "maxLength": 20,
41 | "validationMessage": "Don't be greedy!"
42 | }
43 | },
44 | "required": ["name","comment"]
45 | }
46 | },
47 | "matrix": {
48 | "type": "array",
49 | "items": {
50 | "type": "array",
51 | "items": {
52 | "type": "string"
53 | }
54 | }
55 | },
56 | "subs": {
57 | "type": "array",
58 | "items": {
59 | "type": "object",
60 | "properties": {
61 | "sub": {
62 | "type": "array",
63 | "items": {
64 | "type": "string"
65 | }
66 | }
67 | }
68 | }
69 | },
70 | "triplesubs": {
71 | "type": "array",
72 | "items": {
73 | "type": "object",
74 | "properties": {
75 | "sub": {
76 | "type": "array",
77 | "items": {
78 | "type": "array",
79 | "items": {
80 | "type": "string"
81 | }
82 | }
83 | }
84 | }
85 | }
86 | }
87 | }
88 | },
89 | "form": [
90 | {
91 | "type": "help",
92 | "helpvalue": "Array Example Try adding a couple of forms, reorder by drag'n'drop.
"
93 | },
94 | "tags",
95 | {
96 | "key": "comments",
97 | "add": "New",
98 | "style": {
99 | "add": "btn-success"
100 | },
101 | "items": [
102 | "comments[].name",
103 | "comments[].email",
104 | {
105 | "key": "comments[].spam",
106 | "type": "checkbox",
107 | "title": "Yes I want spam.",
108 | "condition": "model.comments[arrayIndex].email"
109 | },
110 | {
111 | "key": "comments[].comment",
112 | "type": "textarea"
113 | }
114 | ]
115 | },
116 | "matrix",
117 | {
118 | "type": "array",
119 | "key": "subs",
120 | "items": [
121 | "subs[].sub"
122 | ]
123 | },
124 | "triplesubs",
125 | {
126 | "type": "submit",
127 | "style": "btn-info",
128 | "title": "OK"
129 | }
130 | ],
131 | "model": {
132 | "tags": ["one", "two"],
133 | "comments": [{}],
134 | "matrix": [["one","two"],["three"]],
135 | "subs": [{ "sub":["yes!"] }]
136 | }
137 | }
138 |
--------------------------------------------------------------------------------
/examples/custom-validators.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Custom validators, async validators etc
5 | Demo of custom validators, async validators and parsers
11 | Check the source
12 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
120 |
121 |
122 |
123 |
124 |
--------------------------------------------------------------------------------
/test/protractor/specs/tabarray.js:
--------------------------------------------------------------------------------
1 | describe('tab array', function () {
2 | it('form should exist', function () {
3 | browser.get('http://localhost:8080/examples/bootstrap-example.html');
4 |
5 | element(by.css('#selectTest')).all(by.cssContainingText('option', 'Tab Array')).first().click().then(function() {
6 | expect(element(by.css('form.ng-valid-schema-form')).getInnerHtml()).not.toEqual('');
7 | });
8 | });
9 |
10 | it('add link should be hidden', function () {
11 | browser.get('http://localhost:8080/examples/bootstrap-example.html');
12 |
13 | /* select the add disabled example */
14 | element(by.css('#selectTest')).element(by.cssContainingText('option', 'Tab Array: Add Disabled')).click().then(function() {
15 |
16 | /* Add link should not be displayed */
17 | var tabs = element.all(by.css('.nav-tabs li'));
18 | expect(tabs.get(0).isDisplayed()).toBeTruthy();
19 | expect(tabs.get(1).isDisplayed()).toBeFalsy();
20 |
21 | var addLink = element.all(by.partialLinkText('Add'));
22 | expect(addLink.count()).toBe(0);
23 |
24 | /*** control tests ***/
25 | /* Remove button should be displayed */
26 | var removeButton = element.all(by.partialButtonText('Remove')).get(0);
27 | expect(removeButton.isDisplayed()).toBeTruthy();
28 | });
29 | });
30 |
31 | it('remove button should be hidden', function () {
32 | browser.get('http://localhost:8080/examples/bootstrap-example.html');
33 |
34 | /* select the remove disabled example */
35 | element(by.css('#selectTest')).element(by.cssContainingText('option', 'Tab Array: Remove Disabled')).click().then(function() {
36 |
37 | /* Remove button should not be displayed */
38 | var removeButton = element.all(by.partialButtonText('Remove')).get(0);
39 | expect(removeButton.isDisplayed()).toBeFalsy();
40 |
41 | /*** control tests ***/
42 | /* Add link should not be displayed */
43 | var tabs = element.all(by.css('.nav-tabs li'));
44 | expect(tabs.get(0).isDisplayed()).toBeTruthy();
45 | expect(tabs.get(1).isDisplayed()).toBeTruthy();
46 |
47 | var addLink = element.all(by.partialLinkText('Add'));
48 | expect(addLink.count()).toBe(1);
49 | });
50 | });
51 |
52 | it('should be able order elements in array by dragging the tabs', function () {
53 | browser.get('http://localhost:8080/examples/bootstrap-example.html');
54 |
55 | function checkDragDrop(i) {
56 | browser.driver.wait(protractor.until.elementLocated(by.xpath("//ol/li[1]/a[text()='My name is: Name " + (i + 1) +"']")), 10000);
57 | expect(element.all(by.css('.nav-tabs li a')).get(0).getText()).toBe('My name is: Name ' + (i + 1));
58 | }
59 |
60 | function populateTab(i) {
61 | browser.driver.wait(protractor.until.elementLocated(by.css('.tab-pane.active.index' + i)), 5000);
62 |
63 | browser.driver.wait(protractor.until.elementLocated(by.css('.tab-pane.index' + i + ' div.nickField > input')), 5000);
64 | input = element.all(by.css('.tab-pane.index' + i + ' div.nickField > input')).first();
65 | input.sendKeys('Nickname ' + i);
66 |
67 | browser.driver.wait(protractor.until.elementLocated(by.css('.tab-pane.index' + i + ' div.nameField > input')), 5000);
68 | input = element.all(by.css('.tab-pane.index' + i + ' div.nameField > input')).first();
69 | input.sendKeys('Name ' + i);
70 |
71 | browser.driver.wait(protractor.until.elementLocated(by.linkText('My name is: Name ' + i)), 10000);
72 | }
73 |
74 | /* select the sortable example */
75 | element(by.css('#selectTest')).element(by.cssContainingText('option', 'Tab Array: Sortable')).click().then(function() {
76 |
77 | var i;
78 | var elementsToAdd = 9;
79 |
80 | /* the array starts with 1 element, populate the first element */
81 | populateTab(0);
82 |
83 | /* add elements and populate */
84 | for (i = 1; i <= elementsToAdd; i++) {
85 | var tabLink = element.all(by.css('.glyphicon-plus'));
86 | tabLink.click().then(populateTab(i));
87 | }
88 |
89 | /* continue when all tabs have been populated*/
90 | browser.driver.wait(protractor.until.elementLocated(by.linkText('My name is: Name ' + elementsToAdd)), 10000);
91 |
92 | /* check the number of tabs */
93 | var tabs = element.all(by.css('.nav-tabs li'));
94 | expect(tabs.count()).toBe(elementsToAdd + 2); //Extra 1 for the "+ Add" link
95 |
96 | /* drag the tabs into reverse order (descending) */
97 | for (i = 0; i < elementsToAdd; i++) {
98 | var draggable_element = element.all(by.css('.nav-tabs li')).get(0);
99 | var target_element = element.all(by.css('.nav-tabs li')).get(elementsToAdd - i);
100 | expect(draggable_element.isPresent()).toEqual(true);
101 | expect(target_element.isPresent()).toEqual(true);
102 | browser.actions().dragAndDrop(draggable_element, target_element).perform().then(checkDragDrop(i));
103 | }
104 |
105 | /* final check of the reverse ordered tabs */
106 | for (i = 0; i <= elementsToAdd; i++) {
107 | expect(element.all(by.css('.nav-tabs li a')).get(i).getText()).toBe('My name is: Name ' + (elementsToAdd - i));
108 | }
109 | });
110 | });
111 | });
112 |
--------------------------------------------------------------------------------
/src/bootstrap-decorator.js:
--------------------------------------------------------------------------------
1 | // ngtemplate-loader embeds the html on build
2 | import actionsTemplate from './bootstrap/actions.html';
3 | import arrayTemplate from './bootstrap/array.html';
4 | import checkboxTemplate from './bootstrap/checkbox.html';
5 | import checkboxesTemplate from './bootstrap/checkboxes.html';
6 | import defaultTemplate from './bootstrap/default.html';
7 | import fieldsetTemplate from './bootstrap/fieldset.html';
8 | import helpTemplate from './bootstrap/help.html';
9 | import radiobuttonsTemplate from './bootstrap/radio-buttons.html';
10 | import radiosTemplate from './bootstrap/radios.html';
11 | import radiosInlineTemplate from './bootstrap/radios-inline.html';
12 | import sectionTemplate from './bootstrap/section.html';
13 | import selectTemplate from './bootstrap/select.html';
14 | import submitTemplate from './bootstrap/submit.html';
15 | import tabarrayTemplate from './bootstrap/tabarray.html';
16 | import tabsTemplate from './bootstrap/tabs.html';
17 | import textareaTemplate from './bootstrap/textarea.html';
18 |
19 | angular
20 | .module('schemaForm')
21 | .config(bootstrapDecoratorConfig);
22 |
23 | bootstrapDecoratorConfig.$inject = [
24 | 'schemaFormProvider', 'schemaFormDecoratorsProvider', 'sfBuilderProvider', 'sfPathProvider', '$injector'
25 | ];
26 |
27 | function bootstrapDecoratorConfig(
28 | schemaFormProvider, decoratorsProvider, sfBuilderProvider, sfPathProvider, $injector) {
29 | var base = 'decorators/bootstrap/';
30 |
31 | var simpleTransclusion = sfBuilderProvider.builders.simpleTransclusion;
32 | var ngModelOptions = sfBuilderProvider.builders.ngModelOptions;
33 | var ngModel = sfBuilderProvider.builders.ngModel;
34 | var sfField = sfBuilderProvider.builders.sfField;
35 | var condition = sfBuilderProvider.builders.condition;
36 | var array = sfBuilderProvider.builders.array;
37 | var numeric = sfBuilderProvider.builders.numeric;
38 |
39 | // Tabs is so bootstrap specific that it stays here.
40 | var tabs = function(args) {
41 | if (args.form.tabs && args.form.tabs.length > 0) {
42 | var tabContent = args.fieldFrag.querySelector('.tab-content');
43 |
44 | args.form.tabs.forEach(function(tab, index) {
45 | var evalExpr = '(evalExpr(' + args.path + '.tabs[' + index + ']' +
46 | '.condition, { model: model, "arrayIndex": $index}))';
47 | var div = document.createElement('div');
48 | div.className = 'tab-pane';
49 | div.setAttribute('ng-disabled', 'form.readonly');
50 | div.setAttribute('ng-show', 'selected.tab === ' + index);
51 | div.setAttribute('ng-class', '{active: selected.tab === ' + index + '}');
52 | if(!!tab.condition) {
53 | div.setAttribute('ng-if', evalExpr);
54 | };
55 |
56 | var childFrag = args.build(tab.items, args.path + '.tabs[' + index + '].items', args.state);
57 | div.appendChild(childFrag);
58 | tabContent.appendChild(div);
59 | });
60 | }
61 | };
62 |
63 | var selectPlaceholder = function(args) {
64 | if (args.form.placeholder) {
65 | var selectBox = args.fieldFrag.querySelector('select');
66 | var option = document.createElement('option');
67 | option.setAttribute('value', '');
68 |
69 | /* We only want the placeholder to show when we do not have a value on the model.
70 | * We make ngModel builder replace all so we can use $$value$$.
71 | */
72 | option.setAttribute('sf-field-model', 'replaceAll');
73 |
74 | /* https://github.com/angular/angular.js/issues/12190#issuecomment-115277040
75 | * angular > 1.4 does a emptyOption.attr('selected', true)
76 | * which does not like the ng-if comment.
77 | */
78 | if (angular.version.major === 1 && angular.version.minor < 4) {
79 | option.setAttribute('ng-if', '$$value$$ === undefined');
80 | } else {
81 | option.setAttribute('ng-show', '$$value$$ === undefined');
82 | }
83 |
84 | option.textContent = args.form.placeholder;
85 |
86 | selectBox.appendChild(option);
87 | }
88 | };
89 |
90 | var defaults = [sfField, ngModel, ngModelOptions, condition];
91 | decoratorsProvider.defineDecorator('bootstrapDecorator', {
92 | actions: {template: actionsTemplate, builder: defaults},
93 | array: {template: arrayTemplate, builder: [ sfField, ngModelOptions, ngModel, array, condition ]},
94 | button: {template: submitTemplate, builder: defaults},
95 | checkbox: {template: checkboxTemplate, builder: defaults},
96 | checkboxes: {template: checkboxesTemplate, builder: [ sfField, ngModelOptions, ngModel, array, condition ]},
97 | conditional: {template: sectionTemplate, builder: [ sfField, simpleTransclusion, condition ]},
98 | 'default': {template: defaultTemplate, builder: defaults},
99 | fieldset: {template: fieldsetTemplate, builder: [ sfField, simpleTransclusion, condition ]},
100 | help: {template: helpTemplate, builder: defaults},
101 | number: {template: defaultTemplate, builder: defaults.concat(numeric)},
102 | password: {template: defaultTemplate, builder: defaults},
103 | radios: {template: radiosTemplate, builder: defaults},
104 | 'radios-inline': {template: radiosInlineTemplate, builder: defaults},
105 | radiobuttons: {template: radiobuttonsTemplate, builder: defaults},
106 | section: {template: sectionTemplate, builder: [ sfField, simpleTransclusion, condition ]},
107 | select: {template: selectTemplate, builder: [ selectPlaceholder ].concat(defaults)},
108 | submit: {template: submitTemplate, builder: defaults},
109 | tabarray: {template: tabarrayTemplate, builder: [ sfField, ngModelOptions, ngModel, array, condition ]},
110 | tabs: {template: tabsTemplate, builder: [ sfField, ngModelOptions, tabs, condition ]},
111 | textarea: {template: textareaTemplate, builder: defaults},
112 | }, []);
113 | };
114 |
--------------------------------------------------------------------------------
/examples/data/array-deep.json:
--------------------------------------------------------------------------------
1 | {
2 | "schema": {
3 | "type": "object",
4 | "properties": {
5 | "transportCategory": {
6 | "type": "array",
7 | "items": {
8 | "type": "object",
9 | "properties": {
10 | "mode": { "type": "string", "enum": ["Car", "Motorbike", "Horse"] },
11 | "transportOption": {
12 | "type": "array",
13 | "items": {
14 | "type": "object",
15 | "properties": {
16 | "name": { "type": "string" },
17 | "numberOfWheels": { "type": "number" },
18 | "forSale": { "type": "string", "enum": ["yes", "no"] },
19 | "price": { "type": "number" },
20 | "history": {
21 | "type": "object",
22 | "properties": {
23 | "historyKnown": { "type": "string", "enum": ["yes", "no"] },
24 | "previousOwners": {
25 | "type": "array",
26 | "items": {
27 | "type": "object",
28 | "properties": {
29 | "ownerName": { "type": "string" },
30 | "purchaseDate": { "type": "string" },
31 | "logBookProvided": { "type": "string", "enum": ["yes", "no"] },
32 | "logBookEntry": {
33 | "type": "array",
34 | "items": {
35 | "type": "object",
36 | "properties": {
37 | "entryId": { "type": "number" },
38 | "entryDate": { "type": "string" },
39 | "entryNote": { "type": "string" }
40 | }
41 | }
42 | }
43 | }
44 | }
45 | }
46 | }
47 | }
48 | }
49 | }
50 | }
51 | }
52 | }
53 | }
54 | }
55 | },
56 | "form": [
57 | {
58 | "key": "transportCategory",
59 | "type": "tabarray",
60 | "add": "New",
61 | "style": {
62 | "add": "btn-success"
63 | },
64 | "title": "{{ 'Tab '+$index + ' ' + value.mode + ' ' || 'Tab' + $index }}",
65 | "items": [
66 | "transportCategory[].mode",
67 | {
68 | "key": "transportCategory[].transportOption",
69 | "items": [
70 | "transportCategory[].transportOption[].name",
71 | {
72 | "key": "transportCategory[].transportOption[].numberOfWheels",
73 | "condition": "model.transportCategory[arrayIndices[0]].mode != 'Horse'"
74 | },
75 | "transportCategory[].transportOption[].forSale",
76 | {
77 | "key": "transportCategory[].transportOption[].price",
78 | "condition": "model.transportCategory[arrayIndices[0]].transportOption[arrayIndices[1]].forSale == 'yes'"
79 | },
80 | "transportCategory[].transportOption[].history.historyKnown",
81 | {
82 | "key": "transportCategory[].transportOption[].history.previousOwners",
83 | "condition": "model.transportCategory[arrayIndices[0]].transportOption[arrayIndices[1]].history.historyKnown == 'yes'",
84 | "items": [
85 | "transportCategory[].transportOption[].history.previousOwners[].ownerName",
86 | {
87 | "key": "transportCategory[].transportOption[].history.previousOwners[].purchaseDate",
88 | "condition": "model.transportCategory[arrayIndices[0]].transportOption[arrayIndices[1]].history.previousOwners[arrayIndices[2]].ownerName.length > 2"
89 | },
90 | {
91 | "key": "transportCategory[].transportOption[].history.previousOwners[].logBookProvided",
92 | "condition": "model.transportCategory[arrayIndices[0]].mode != 'Horse' && model.transportCategory[arrayIndices[0]].transportOption[arrayIndices[1]].history.previousOwners[arrayIndices[2]].ownerName.length > 2"
93 | },
94 | {
95 | "key": "transportCategory[].transportOption[].history.previousOwners[].logBookEntry",
96 | "condition": "model.transportCategory[arrayIndices[0]].transportOption[arrayIndices[1]].history.previousOwners[arrayIndices[2]].logBookProvided == 'yes'",
97 | "items": [
98 | "transportCategory[].transportOption[].history.previousOwners[].logBookEntry[].entryId",
99 | "transportCategory[].transportOption[].history.previousOwners[].logBookEntry[].entryDate",
100 | {
101 | "key": "transportCategory[].transportOption[].history.previousOwners[].logBookEntry[].entryNote",
102 | "condition": "model.transportCategory[arrayIndices[0]].transportOption[arrayIndices[1]].history.previousOwners[arrayIndices[2]].logBookEntry[arrayIndices[3]].entryDate.length > 2"
103 | }
104 | ]
105 | }
106 | ]
107 | }
108 | ]
109 | }
110 | ]
111 | }
112 | ],
113 | "model": {
114 | "transportCategory": [
115 | {
116 | "mode": "Car",
117 | "transportOption": [
118 | {
119 | "name": "Bertie",
120 | "forSale": "yes",
121 | "price": 100,
122 | "history": {
123 | "historyKnown": "no"
124 | }
125 | },
126 | {
127 | "name": "Lightning McQueen",
128 | "forSale": "no",
129 | "history": {
130 | "historyKnown": "yes",
131 | "previousOwners": [
132 | {
133 | "ownerName": ""
134 | },
135 | {
136 | "ownerName": "Arlo",
137 | "logBookProvided": "yes",
138 | "logBookEntry": [
139 | {
140 | "entryId": 2,
141 | "entryDate": "2015-06-23"
142 | },
143 | {
144 | "entryId": 4
145 | }
146 | ]
147 | }
148 | ]
149 | }
150 | }
151 | ]
152 | },
153 | {
154 | "mode": "Horse",
155 | "transportOption": [
156 | {
157 | "name": "Phar Lap",
158 | "forSale": "no"
159 | },
160 | {
161 | "name": "Greyhound",
162 | "forSale": "yes",
163 | "price": 1000,
164 | "history": {
165 | "historyKnown": "yes",
166 | "previousOwners": [
167 | {
168 | "ownerName": "Tom"
169 | }
170 | ]
171 | }
172 | }
173 | ]
174 | }
175 | ]
176 | }
177 | }
178 |
--------------------------------------------------------------------------------
/examples/data/sink.json:
--------------------------------------------------------------------------------
1 | {
2 | "schema": {
3 | "type": "object",
4 | "required": [
5 | "name",
6 | "shoesizeLeft"
7 | ],
8 | "properties": {
9 | "name": {
10 | "title": "Name",
11 | "description": "Gimme yea name lad",
12 | "type": "string",
13 | "pattern": "^[^/]*$",
14 | "minLength": 2
15 | },
16 | "invitation": {
17 | "type": "string",
18 | "format": "html",
19 | "title": "Invitation Design",
20 | "description": "Design the invitation in full technicolor HTML"
21 | },
22 | "favorite": {
23 | "title": "Favorite",
24 | "type": "string",
25 | "enum": [
26 | "undefined",
27 | "null",
28 | "NaN"
29 | ]
30 | },
31 | "shoesizeLeft": {
32 | "title": "Shoe size (left)",
33 | "default": 42,
34 | "type": "number"
35 | },
36 | "shoesizeRight": {
37 | "title": "Shoe size (right)",
38 | "default": 42,
39 | "type": "number"
40 | },
41 | "attributes": {
42 | "type": "object",
43 | "title": "Attributes",
44 | "required": [
45 | "eyecolor"
46 | ],
47 | "properties": {
48 | "eyecolor": {
49 | "type": "string",
50 | "format": "color",
51 | "title": "Eye color",
52 | "default": "pink"
53 | },
54 | "haircolor": {
55 | "type": "string",
56 | "title": "Hair color"
57 | },
58 | "shoulders": {
59 | "type": "object",
60 | "title": "Shoulders",
61 | "properties": {
62 | "left": {
63 | "type": "string",
64 | "title": "Left"
65 | },
66 | "right": {
67 | "type": "string",
68 | "title": "Right"
69 | }
70 | }
71 | }
72 | }
73 | },
74 | "things": {
75 | "type": "array",
76 | "title": "I like...",
77 | "items": {
78 | "type": "string",
79 | "enum": [
80 | "clowns",
81 | "compiling",
82 | "sleeping"
83 | ]
84 | }
85 | },
86 | "dislike": {
87 | "type": "array",
88 | "title": "I dislike...",
89 | "items": {
90 | "type": "string",
91 | "title": "I hate"
92 | }
93 | },
94 | "soul": {
95 | "title": "Terms Of Service",
96 | "description": "I agree to sell my undying soul ",
97 | "type": "boolean",
98 | "default": true
99 | },
100 | "soulserial": {
101 | "title": "Soul Serial No",
102 | "type": "string"
103 | },
104 | "date": {
105 | "title": "Date of party",
106 | "type": "string",
107 | "format": "date"
108 | },
109 | "radio": {
110 | "title": "Radio type",
111 | "type": "string",
112 | "enum": [
113 | "Transistor",
114 | "Tube"
115 | ]
116 | },
117 | "radio2": {
118 | "title": "My Second Radio",
119 | "type": "string",
120 | "enum": [
121 | "Transistor",
122 | "Tube"
123 | ]
124 | },
125 | "radiobuttons": {
126 | "type": "string",
127 | "enum": [
128 | "Select me!",
129 | "No me!"
130 | ]
131 | }
132 | }
133 | },
134 | "form": [
135 | {
136 | "type": "fieldset",
137 | "title": "Stuff",
138 | "items": [
139 | {
140 | "type": "tabs",
141 | "tabs": [
142 | {
143 | "title": "Simple stuff",
144 | "items": [
145 | {
146 | "key": "name",
147 | "placeholder": "Check the console",
148 | "onChange": "log(modelValue)",
149 | "feedback": "{'glyphicon': true, 'glyphicon-ok': hasSuccess(), 'glyphicon-star': !hasSuccess() }"
150 | },
151 | {
152 | "key": "favorite",
153 | "feedback": false
154 | }
155 | ]
156 | },
157 | {
158 | "title": "More stuff",
159 | "items": [
160 | "attributes.eyecolor",
161 | "attributes.haircolor",
162 | {
163 | "key": "attributes.shoulders.left",
164 | "title": "Left shoulder",
165 | "description": "This value is copied to attributes.shoulders.right in the model",
166 | "copyValueTo": ["attributes.shoulders.right"]
167 | },
168 | {
169 | "key": "shoesizeLeft",
170 | "feedback": false,
171 | "copyValueTo":["shoesizeRight"]
172 | },
173 | {
174 | "key": "shoesizeRight"
175 | },
176 | {
177 | "key": "invitation",
178 | "tinymceOptions": {
179 | "toolbar": [
180 | "undo redo| styleselect | bold italic | link image",
181 | "alignleft aligncenter alignright"
182 | ]
183 | }
184 | },
185 | "things",
186 | "dislike"
187 | ]
188 | }
189 | ]
190 | }
191 | ]
192 | },
193 | {
194 | "type": "help",
195 | "helpvalue": "Bootstrap Schema Form example
6 |
97 |
98 |
99 |
102 |
103 |
104 |
140 |
142 |
143 |
144 |
145 |
146 |
147 |
The Generated Form
148 |
149 |
150 |
158 |
Form is valid
159 |
Form is not valid
160 |
161 |
Model
162 |
{{pretty()}}
163 |
164 |
165 |
Select Example
166 |
176 |
Form
177 |
179 |
Schema
180 |
182 |
183 |
184 |
191 |
\r\n
\r\n';window.angular.module("ng").run(["$templateCache",function(r){r.put(n,a)}]),r.exports=n},function(r,e){var n="/bootstrap/array.html",a='\r\n';window.angular.module("ng").run(["$templateCache",function(r){r.put(n,a)}]),r.exports=n},function(r,e){var n="/bootstrap/checkbox.html",a='\r\n';window.angular.module("ng").run(["$templateCache",function(r){r.put(n,a)}]),r.exports=n},function(r,e){var n="/bootstrap/checkboxes.html",a='\r\n';window.angular.module("ng").run(["$templateCache",function(r){r.put(n,a)}]),r.exports=n},function(r,e){var n="/bootstrap/default.html",a='\r\n';window.angular.module("ng").run(["$templateCache",function(r){r.put(n,a)}]),r.exports=n},function(r,e){var n="/bootstrap/fieldset.html",a='\r\n {{ form.title }} \r\n
\r\n \r\n';window.angular.module("ng").run(["$templateCache",function(r){r.put(n,a)}]),r.exports=n},function(r,e){var n="/bootstrap/help.html",a='
\r\n';window.angular.module("ng").run(["$templateCache",function(r){r.put(n,a)}]),r.exports=n},function(r,e){var n="/bootstrap/radio-buttons.html",a='\r\n';window.angular.module("ng").run(["$templateCache",function(r){r.put(n,a)}]),r.exports=n},function(r,e){var n="/bootstrap/radios-inline.html",a='\r\n';window.angular.module("ng").run(["$templateCache",function(r){r.put(n,a)}]),r.exports=n},function(r,e){var n="/bootstrap/radios.html",a='\r\n';window.angular.module("ng").run(["$templateCache",function(r){r.put(n,a)}]),r.exports=n},function(r,e){var n="/bootstrap/section.html",a='
\r\n';window.angular.module("ng").run(["$templateCache",function(r){r.put(n,a)}]),r.exports=n},function(r,e){var n="/bootstrap/select.html",a='\r\n';window.angular.module("ng").run(["$templateCache",function(r){r.put(n,a)}]),r.exports=n},function(r,e){var n="/bootstrap/submit.html",a='\r\n \r\n \r\n
\r\n';window.angular.module("ng").run(["$templateCache",function(r){r.put(n,a)}]),r.exports=n},function(r,e){var n="/bootstrap/tabarray.html",a='\r\n\r\n \r\n\r\n\r\n';window.angular.module("ng").run(["$templateCache",function(r){r.put(n,a)}]),r.exports=n},function(r,e){var n="/bootstrap/tabs.html",a='\r\n';window.angular.module("ng").run(["$templateCache",function(r){r.put(n,a)}]),r.exports=n},function(r,e){var n="/bootstrap/textarea.html",a='\r\n
{{form.title}} \r\n\r\n
\r\n\r\n
\r\n
\r\n\r\n
\r\n
\r\n
\r\n";
89 | window.angular.module('ng').run(['$templateCache', function(c) { c.put(path, html) }]);
90 | module.exports = path;
91 |
92 | /***/ },
93 | /* 3 */
94 | /***/ function(module, exports) {
95 |
96 | var path = '/bootstrap/array.html';
97 | var html = "\r\n";
98 | window.angular.module('ng').run(['$templateCache', function(c) { c.put(path, html) }]);
99 | module.exports = path;
100 |
101 | /***/ },
102 | /* 4 */
103 | /***/ function(module, exports) {
104 |
105 | var path = '/bootstrap/checkbox.html';
106 | var html = "\r\n
\r\n \r\n
\r\n
\r\n {{ form.title }} \r\n
\r\n \r\n";
134 | window.angular.module('ng').run(['$templateCache', function(c) { c.put(path, html) }]);
135 | module.exports = path;
136 |
137 | /***/ },
138 | /* 8 */
139 | /***/ function(module, exports) {
140 |
141 | var path = '/bootstrap/help.html';
142 | var html = "
\r\n";
143 | window.angular.module('ng').run(['$templateCache', function(c) { c.put(path, html) }]);
144 | module.exports = path;
145 |
146 | /***/ },
147 | /* 9 */
148 | /***/ function(module, exports) {
149 |
150 | var path = '/bootstrap/radio-buttons.html';
151 | var html = "\r\n";
152 | window.angular.module('ng').run(['$templateCache', function(c) { c.put(path, html) }]);
153 | module.exports = path;
154 |
155 | /***/ },
156 | /* 10 */
157 | /***/ function(module, exports) {
158 |
159 | var path = '/bootstrap/radios-inline.html';
160 | var html = "\r\n";
161 | window.angular.module('ng').run(['$templateCache', function(c) { c.put(path, html) }]);
162 | module.exports = path;
163 |
164 | /***/ },
165 | /* 11 */
166 | /***/ function(module, exports) {
167 |
168 | var path = '/bootstrap/radios.html';
169 | var html = "\r\n";
170 | window.angular.module('ng').run(['$templateCache', function(c) { c.put(path, html) }]);
171 | module.exports = path;
172 |
173 | /***/ },
174 | /* 12 */
175 | /***/ function(module, exports) {
176 |
177 | var path = '/bootstrap/section.html';
178 | var html = "
\r\n";
179 | window.angular.module('ng').run(['$templateCache', function(c) { c.put(path, html) }]);
180 | module.exports = path;
181 |
182 | /***/ },
183 | /* 13 */
184 | /***/ function(module, exports) {
185 |
186 | var path = '/bootstrap/select.html';
187 | var html = "\r\n";
188 | window.angular.module('ng').run(['$templateCache', function(c) { c.put(path, html) }]);
189 | module.exports = path;
190 |
191 | /***/ },
192 | /* 14 */
193 | /***/ function(module, exports) {
194 |
195 | var path = '/bootstrap/submit.html';
196 | var html = "\r\n \r\n \r\n
\r\n";
197 | window.angular.module('ng').run(['$templateCache', function(c) { c.put(path, html) }]);
198 | module.exports = path;
199 |
200 | /***/ },
201 | /* 15 */
202 | /***/ function(module, exports) {
203 |
204 | var path = '/bootstrap/tabarray.html';
205 | var html = "\r\n
\r\n\r\n
\r\n
\r\n
\r\n\r\n
\r\n\r\n
= modelArray.length\"\r\n type=\"button\"\r\n class=\"btn {{ form.style.remove || 'btn-default' }} pull-right\">\r\n \r\n
\r\n
\r\n
\r\n
\r\n