You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Generate forms from a JSON schema, with AngularJS!
8
+
Generate forms from JSON schemas using AngularJS!
9
9
10
10
### [Try out the example page](http://textalk.github.io/angular-schema-form/examples/bootstrap-example.html)
11
-
...where you can edit the schema or the form definition and see what comes out!
12
-
11
+
Try editing the schema or form definition and see what comes out!
13
12
14
13
What is it?
15
14
----------
16
15
17
-
Schema Form is a set of AngularJS directives (and a couple of services..) that can create a form directly from a json schema
18
-
definition and also validate against that schema. The defaults may be fine for a lot cases, but you can also
19
-
customize it, changing order and type of fields.
16
+
Schema Form is a set of AngularJS directives (and a couple of services). It can do two things to make life easier:
17
+
18
+
1. Create a form directly from a JSON schema.
19
+
2. Validate form fields against that same JSON schema.
20
20
21
+
Schema Form uses convention over configuration, so it comes packaged with some sensible defaults. But you can always customize it by changing the order and types of form fields.
21
22
22
-
Schema Form is inspired by the nice [JSON Form](https://github.com/joshfire/jsonform) library and aims to be roughly
23
-
compatible with it, especially it's form defintion. What sets Schema Form apart from JSON Form is that Schema Form
24
-
aims to be deeply integrated with AngularJS, i.e. to use the standard AngularJS way of handling forms. It also uses
25
-
[tv4](https://github.com/geraintluff/tv4) for validation which means its compatible with version 4 of the json schema
26
-
standard. Schema Form, as a default, generates bootstrap 3 friendly HTML.
23
+
JSON Form
24
+
---------
25
+
Schema Form is inspired by the nice [JSON Form](https://github.com/joshfire/jsonform) library and aims to be roughly compatible with it, especially its form definition. So what sets Schema Form apart from JSON Form?
26
+
27
+
1. Schema Form integrates deeply with AngularJS and uses AngularJS conventions to handle forms.
28
+
2. Schema Form uses [tv4](https://github.com/geraintluff/tv4) for validation, making it compatible with version 4 of the JSON schema standard.
29
+
3. By default, Schema Form generates Bootstrap 3-friendly HTML.
5. If you want to use the date picker, you'll also need [jQuery](https://github.com/jquery/jquery) and [pickadate.js](http://amsul.ca/pickadate.js/)
101
+
7. If you'd like to use drag-and-drop reordering of arrays, you'll also need [ui-sortable](https://github.com/angular-ui/ui-sortable) and its [jQueryUI](http://jqueryui.com/) dependencies. See the *ui-sortable* documentation for details about which parts of jQueryUI are needed. You can safely ignore these if you don't need reordering.
102
+
8. Schema Form provides tabbed arrays through the form type `tabarray`. Tab arrays default to tabs on the left side. For these to work, you'll need to include the CSS from [bootstrap-vertical-tabs](https://github.com/dbtek/bootstrap-vertical-tabs). However, you won't need Bootstrap Vertical Tabs for horizontal tabs (the `tabType: "top"` option).
98
103
99
-
Addons
100
-
------
101
-
Currently there is only one addon, a date picker using
102
-
the excellent [pickadate.js](http://amsul.ca/pickadate.js/).
104
+
The minified files include templates - no need to load additional HTML files.
103
105
104
-
See the [docs](docs/datepicker.md) for usage.
106
+
Add-ons
107
+
------
108
+
There is currently only one add-on, a date picker using the excellent [pickadate.js](http://amsul.ca/pickadate.js/).
105
109
110
+
See the [add-on docs](docs/datepicker.md) for usage.
106
111
107
112
Building
108
113
--------
109
-
The files in the ```dist``` plus dependencies are all you need to use Schema
110
-
Form, but if you like to build it yourself we use [gulp](http://gulpjs.com/).
114
+
The files in the `dist/` folder, plus dependencies, are all you need to use Schema Form. But if you'd like to build it yourself, we use [gulp](http://gulpjs.com/).
111
115
112
-
First off you need to have nodejs installed. Then install all dev dependencies
113
-
of the project with npm, install gulp and run the default task.
116
+
First off, you need to have nodejs installed. Then install all dev dependencies of the project with npm, install gulp and run the default task.
114
117
115
118
```bash
116
119
$ npm install
117
120
$ sudo npm install -g gulp
118
121
$ gulp
119
122
```
120
123
121
-
The default task uses [gulp-angular-templatecache](https://github.com/miickel/gulp-angular-templatecache)
122
-
to compile all html templates to js and then concatenates and minifies them with
123
-
the rest of the sources.
124
+
The default task uses [gulp-angular-templatecache](https://github.com/miickel/gulp-angular-templatecache) to compile all html templates to js and then concatenates and minifies them with the rest of the sources.
124
125
125
-
You can also run ```gulp watch``` to have it rebuild on change.
126
+
You can also run `gulp watch` to have it rebuild on change.
126
127
127
128
Tests
128
129
-----
129
-
Unit tests are run with [karma](http://karma-runner.github.io) and written using
Unit tests are run with [karma](http://karma-runner.github.io) and written using[mocha](http://visionmedia.github.io/mocha/), [chai](http://chaijs.com/) and [sinon](http://sinonjs.org/)
131
+
132
+
To run the tests:
132
133
133
-
To run the tests first install all dependencies with npm (if you haven't done it
134
-
already) and install the karma cli to run the test.
134
+
1. Install all dependencies via NPM
135
+
2. Install the Karma CLI
136
+
3. Run the tests
135
137
136
138
```bash
137
139
$ npm install
@@ -142,5 +144,4 @@ $ karma start karma.conf.js
142
144
Contributing
143
145
------------
144
146
145
-
All contributions are welcome! We're trying to use [git flow](http://danielkummer.github.io/git-flow-cheatsheet/)
146
-
so please base any merge request on the **development** branch instead of **master**.
147
+
All contributions are welcome! We're trying to use [git flow](http://danielkummer.github.io/git-flow-cheatsheet/), so please base any merge request on the **development** branch instead of **master**.
Everyone loves a nice date picker - now you can have your very own date picker in Schema Form! The date picker add-on uses the excellent jQuery-based date picker, [pickadate.js](http://amsul.ca/pickadate.js/).
7
5
8
-
Note that dates in JSON Schema has the type *"string"* and follow the *RFC 3339*
9
-
date fomat which in turn follows *ISO 8601*. So what does that really mean? Stick
10
-
with the format ```yyyy-mm-dd``` and you'll be fine. The date picker only
11
-
supports date, not time.
6
+
Dates in JSON Schema are of type *"string"* and follow the *RFC 3339* date fomat, which, in turn, follows *ISO 8601*. What does that mean for you? Basically, just stick with the format `yyyy-mm-dd` and you'll be fine.
7
+
8
+
Within Schema Form, pickadate only supports dates - not times.
12
9
13
10
Installation
14
11
------------
15
-
The date picker is an addon to the bootstrap decorator. To use it you just
16
-
include ```dist/bootstrap-datepicker.min.js```*after*```dist/bootstrap-decorator.min.js```
17
-
18
-
You'll also need the files neccessary for pickadate, see the pickadate.js
19
-
[github page](https://github.com/amsul/pickadate.js) or documentation.
20
-
21
-
Note that it depends on jQuery and that you also need CSS and translation files
22
-
for the language you like to use.
12
+
The date picker is an add-on to the Bootstrap decorator. To use it, just include `dist/bootstrap-datepicker.min.js`*after*`dist/bootstrap-decorator.min.js`.
23
13
14
+
You'll need to load a few additional files to use pickadate:
24
15
16
+
1. jQuery (pickadate depends on it)
17
+
2. The pickadate source files (see the pickadate.js [GitHub page](https://github.com/amsul/pickadate.js) for documentation)
18
+
3. The pickadate CSS
19
+
4. Translation files for whatever language you want to use
25
20
26
21
Usage
27
22
-----
28
-
The datepicker addon adds a new form type```datepicker``` and a new default
23
+
The datepicker add-on adds a new form type, `datepicker`, and a new default
29
24
mapping.
30
25
31
26
| Form Type | Becomes |
32
27
|:---------------|:------------:|
33
-
| datepicker | a pick a date widget |
28
+
| datepicker | a pickadate widget |
34
29
35
30
36
-
| Schema | Form type |
31
+
| Schema |Default Form type |
37
32
|:-------------------|:------------:|
38
33
| "type": "string" and "format": "date" | datepicker |
39
34
40
35
41
-
Options
36
+
Form Type Options
42
37
-------
38
+
The `datepicker` form type takes two options: `minDate` and `maxDate`. `minDate` and `maxDate` both accept one of the following as values:
39
+
40
+
1. A string in the format `yyyy-mm-dd`,
41
+
2. A unix timestamp (as a Number), or
42
+
3. An instance of `Date`
43
+
44
+
Here's an example:
45
+
43
46
```javascript
44
47
{
45
48
key:"birthDate",
@@ -48,6 +51,4 @@ Options
48
51
}
49
52
```
50
53
51
-
The ```datepicker``` takes two options, a max and min date. Both take either
52
-
a string in the format ```yyyy-mm-dd```, a unix timestamp (as a Number) or a
0 commit comments