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
+
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.
20
22
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?
21
26
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.
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.
If you install via bower you get all of the above except bootstrap since we
109
+
don't want to push a certain version or flavor on you. Also make
110
+
sure you got the angular version you actually want.
103
111
104
-
See the [docs](docs/datepicker.md) for usage.
112
+
#### Additional dependecies
105
113
114
+
1. 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/)
115
+
2. 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.
116
+
3. 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).
117
+
118
+
The minified files include templates - no need to load additional HTML files.
119
+
120
+
Add-ons
121
+
------
122
+
There is currently only one add-on, a date picker using the excellent [pickadate.js](http://amsul.ca/pickadate.js/).
123
+
124
+
See the [add-on docs](docs/datepicker.md) for usage.
106
125
107
126
Building
108
127
--------
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/).
128
+
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
129
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.
130
+
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
131
115
132
```bash
116
133
$ npm install
117
134
$ sudo npm install -g gulp
118
135
$ gulp
119
136
```
120
137
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.
138
+
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
139
125
-
You can also run ```gulp watch``` to have it rebuild on change.
140
+
You can also run `gulp watch` to have it rebuild on change.
126
141
127
142
Tests
128
143
-----
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/)
145
+
146
+
To run the tests:
132
147
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.
148
+
1. Install all dependencies via NPM
149
+
2. Install the Karma CLI
150
+
3. Run the tests
135
151
136
152
```bash
137
153
$ npm install
@@ -142,5 +158,4 @@ $ karma start karma.conf.js
142
158
Contributing
143
159
------------
144
160
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**.
161
+
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**.
0 commit comments