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
A [JSON Schema](http://json-schema.org) Form builder for Angular 2, similar to, and mostly API compatible with,
4
6
5
7
*[JSON Schema Form](https://github.com/json-schema-form)'s [Angular Schema Form](http://schemaform.io) for [Angular 1](https://angularjs.org) ([examples](http://schemaform.io/examples/bootstrap-example.html))
@@ -12,7 +14,7 @@ Note: This is a personal proof-of-concept project, and is NOT currently affiliat
12
14
13
15
### To install from GitHub and play with the examples
14
16
15
-
The [GitHub](https://github.com) version of Angular 2 JSON Schema Form includes an example playground with over 70 different JSON Schemas (including all examples used by each of the three libraries listed above), and the ability to quickly view any example formatted using Bootstrap 3 or Material Design (or without formatting, which works, but is usually pretty ugly).
17
+
The [GitHub](https://github.com) version of Angular 2 JSON Schema Form includes an example playground with over 70 different JSON Schemas (including all examples used by each of the three libraries listed above), and the ability to quickly view any example formatted using Bootstrap 3 or Material Design (or without formatting, which is functional, but usually pretty ugly).
16
18
17
19
To install both the library and the example playground, clone `https://github.com/dschnelldavis/angular2-json-schema-form.git` with your favorite git program, or enter the following in your terminal:
18
20
@@ -30,42 +32,58 @@ All the source code is in the `/src` folder. Inside that folder, you will find t
30
32
*`library` contains the Angular 2 JSON Schema Form library.
31
33
*`playground` contains the example playground.
32
34
*`playground/examples` contains the JSON Schema examples.
33
-
*`frameworks` contains the widget library (described below).
34
-
*`widgets` contains the framework library.
35
+
*`frameworks` contains the framework library (described below).
36
+
*`widgets` contains the widget library.
35
37
36
38
If you want additional documentation describing the individual functions used in this library, run `npm run docs` to generate TypeDoc documentation, and then look in the newly generated `/docs` folder.
37
39
38
40
### To install from NPM and use in your own project
39
41
40
-
If, after playing with the examples, you decide this library is functional enough to use in your own project, you can install it from [NPM](https://www.npmjs.com)with:
42
+
If, after playing with the examples, you decide this library is functional enough to use in your own project, you can install it from [NPM](https://www.npmjs.com)by running the following from your terminal:
41
43
42
44
```
43
45
npm install angular2-json-schema-form -save
44
46
```
45
47
46
-
Then add these two lines to your main application module:
48
+
Then add this line to your main application module:
(For a complete example of how to install and use the library, clone the GitHub repository and look at how the library is imported into the example playground.)
70
88
71
89
## Using Angular 2 JSON Schema Form
@@ -81,17 +99,17 @@ For basic use, after loading the JsonSchemaFormModule as described above, to add
81
99
</json-schema-form>
82
100
```
83
101
84
-
Where the 'schema' input is a valid JSON schema object (either v3 or v4), and the 'onSubmit' output is a function that will be called when the form is submitted, with the results of the form as a JSON object.
102
+
Where the `schema` input is a valid JSON schema object (either v3 or v4), and the `onSubmit` output is a function that will be called when the form is submitted, with the results of the form as a JSON object.
85
103
86
104
### Advanced use
87
105
88
106
For more advanced cases, you may also provide three additional inputs:
89
107
90
-
*'layout' with a custom form layout (see Angular Schema Form's [form definitions](https://github.com/json-schema-form/angular-schema-form/blob/master/docs/index.md#form-definitions) for information about how to construct a form layout)
91
-
*'data' to populate the form with defaults or previously submitted values, and
92
-
*'options' to set any global options for the form.
108
+
*`layout` with a custom form layout (see Angular Schema Form's [form definitions](https://github.com/json-schema-form/angular-schema-form/blob/master/docs/index.md#form-definitions) for information about how to construct a form layout)
109
+
*`data` to populate the form with defaults or previously submitted values, and
110
+
*`options` to set any global options for the form.
93
111
94
-
If you want more detailed output, you may provide additional functions for 'onChanges' to read the form values in real time (including before the completed form has been submitted) and you may implement your own custom validation from the boolean 'isValid' or the detailed 'validationErrors' outputs.
112
+
If you want more detailed output, you may provide additional functions for `onChanges` to read the form values in real time (including before the completed form has been submitted) and you may implement your own custom validation from the boolean `isValid` or the detailed `validationErrors` outputs.
95
113
96
114
Here is an example:
97
115
@@ -108,14 +126,14 @@ Here is an example:
108
126
</json-schema-form>
109
127
```
110
128
111
-
Alternately, you may also combine all your inputs into one compound object and include it as a 'form' input, like so:
129
+
Alternately, you may also combine all your inputs into one compound object and include it as a `form` input, like so:
112
130
113
131
```javascript
114
132
let yourCompoundInputObject = {
115
-
schema: {...}, // required
116
-
layout: [...], // optional
117
-
data: {...}, // optional
118
-
options: {...} // optional
133
+
schema:{...}, // required
134
+
layout:[...], // optional
135
+
data:{...}, // optional
136
+
options: {...} // optional
119
137
}
120
138
```
121
139
@@ -167,7 +185,7 @@ import { WidgetLibraryService } from 'angular2-json-schema-form';
The value of the required 'framework' key is an Angular 2 component which will be called to format each widget before it is displayed. The optional 'widgets' object contains any custom widgets which will override or supplement the built-in widgets, and the 'stylesheets' and 'scripts' arrays contain URLs to any supplemental external style sheets and JavaScript libraries to load.
216
+
The value of the required `framework` key is an Angular 2 component which will be called to format each widget before it is displayed. The optional `widgets` object contains any custom widgets which will override or supplement the built-in widgets, and the `stylesheets` and `scripts` arrays contain URLs to any supplemental external style sheets and JavaScript libraries to load.
199
217
200
-
The two built-in frameworks (both in the `/src/frameworks` folder) demonstrate different strategies for how frameworks can style form elements. The Bootstrap 3 framework is very lightweight and includes no additional widgets (though it does load some external stylesheets and scripts) and works entirely by adding styles to the default widgets. In contrast, the Material Design framework makes much more drastic changes, and uses the [Material Design for Angular 2](https://github.com/angular/material2) library (which must be loaded separately in the Angular 2 application module) to replace most of the default form control widgets with custom widgets from that library.
218
+
The two built-in frameworks (both in the `/src/frameworks` folder) demonstrate different strategies for how frameworks can style form elements. The Bootstrap 3 framework is very lightweight and includes no additional widgets (though it does load some external stylesheets and scripts) and works entirely by adding styles to the default widgets. In contrast, the Material Design framework makes much more drastic changes, and uses the [Material Design for Angular 2](https://github.com/angular/material2) library to replace most of the default form control widgets with custom widgets from that library.
201
219
202
220
## Contributions and future development
203
221
204
222
I wrote this library because I needed a JSON Schema Form builder to use in a large Angular 2 project I am currently working on. Though I found excellent libraries for Angular 1, React, and jQuery (all linked above), I could not find anything similar for Angular 2—so I wrote this library to fill that gap.
205
223
206
-
The current version is mostly functional, and even includes a few enhancements not available in some other libraries, such as supporting less common JSON Schema features like 'oneOf', 'allOf', and '$ref' links (including circular links). However, it still has several bugs, such as not dynamically enabling and disabling conditionally required fields inside objects, and is very fragile because it does not yet include any testing framework at all.
224
+
The current version is mostly functional, and even includes a few enhancements not available in some other libraries, such as supporting less common JSON Schema features like `oneOf`, `allOf`, and `$ref` links (including circular links). However, it still has several bugs, such as not dynamically enabling and disabling conditionally required fields inside objects, and is very fragile because it does not yet include any testing framework at all.
207
225
208
226
So if you find this library useful, I encourage you to fork it and send back pull requests for any improvements you make. (I would _love_ some tests...) You are also welcome to submit bug reports, however, as I am just a single busy developer, I can't guarantee how long it might take to fix any individual bugs. So if you want a change or fix to be implemented quickly, your best bet is to do it yourself and send a pull request.
0 commit comments