@@ -3,7 +3,7 @@ Angular Schema Form
3
3
4
4
Generate forms from a JSON schema, with AngularJS!
5
5
6
- ### [ Try out the example page] ( http://textalk.github.io/angular-schema-form/src/bootstrap-example.html )
6
+ ### [ Try out the example page] ( http://textalk.github.io/angular-schema-form/src/bootstrap-example.html )
7
7
...where you can edit the schema or the form definition and see what comes out!
8
8
9
9
@@ -41,14 +41,15 @@ function FormController($scope) {
41
41
title: {
42
42
type: " string" ,
43
43
enum: [' dr' ,' jr' ,' sir' ,' mrs' ,' mr' ,' NaN' ,' dj' ]
44
+ }
44
45
}
45
46
};
46
47
47
48
$scope .form = [
48
49
" *" ,
49
50
{
50
51
type: " submit" ,
51
- title: " Save" ,
52
+ title: " Save"
52
53
}
53
54
];
54
55
@@ -64,6 +65,7 @@ Schema Form currently supports the following form field types:
64
65
| :--------------| :------------------------|
65
66
| fieldset | a fieldset with legend |
66
67
| section | just a div |
68
+ | conditional | a section with a ``` ng-if ``` |
67
69
| actions | horizontal button list, can only submit and buttons as items |
68
70
| text | input with type text |
69
71
| textarea | a textarea |
@@ -73,7 +75,8 @@ Schema Form currently supports the following form field types:
73
75
| select | a select (single value)|
74
76
| submit | a submit button |
75
77
| button | a button |
76
-
78
+ | radios | radio buttons |
79
+ | radiobuttons | radio buttons with bootstrap buttons |
77
80
78
81
79
82
Default form types
205
208
Specific options per type
206
209
-------------------------
207
210
211
+ ### fieldset and section
212
+
208
213
* fieldset* and * section* doesn't need a key. You can create generic groups with them.
209
214
They do need a list of ``` items ``` to have as children.
210
215
``` javascript
@@ -217,6 +222,59 @@ They do need a list of ```items``` to have as children.
217
222
}
218
223
```
219
224
225
+ ### conditional
226
+
227
+ A * conditional* is exactly the same as a * section* , i.e. a ``` <div> ``` with other form elements in
228
+ it, hence they need an ``` items ``` property. They also need a ``` condition ``` which is
229
+ a string with an angular expression. If that expression evaluates as thruthy the * conditional*
230
+ will be rendered into the DOM otherwise not. The expression is evaluated in the parent scope of
231
+ the ``` sf-schema ``` directive (the same as onClick on buttons) but with access to the current model
232
+ under the name ``` model ``` . This is useful for hiding/showing
233
+ parts of a form depending on another form control.
234
+
235
+ ex. A checkbox that shows an input field for a code when checked
236
+
237
+ ``` javascript
238
+ function FormCtrl ($scope ) {
239
+ $scope .person = {}
240
+
241
+ $scope .schema = {
242
+ " type" : " object" ,
243
+ " properties" : {
244
+ " name" : {
245
+ " type" : " string" ,
246
+ " title" : " Name"
247
+ },
248
+ " eligible" : {
249
+ " type" : " boolean" ,
250
+ " title" : " Eligible for awesome things"
251
+ },
252
+ " code" : {
253
+ " type" : " string"
254
+ " title" : " The Code"
255
+ }
256
+ }
257
+ }
258
+
259
+ $scope .form = [
260
+ " name" ,
261
+ " eligible" ,
262
+ {
263
+ type: " conditional" ,
264
+ condition: " person.eligible" , // or "model.eligable"
265
+ items: [
266
+ " code"
267
+ ]
268
+ }
269
+ ]
270
+ }
271
+ ```
272
+ Note that angulars two-way binding automatically will update the conditional block, no need for
273
+ event handlers and such. The condition need not reference a model value it could be anything in
274
+ scope.
275
+
276
+
277
+ ### select and checkboxes
220
278
221
279
* select* and * checkboxes* can take an object, ``` titleMap ``` , where key is the value to be saved on the model
222
280
and the value is the title of the option.
@@ -230,6 +288,8 @@ and the value is the title of the option.
230
288
}
231
289
```
232
290
291
+ ### actions
292
+
233
293
* actions* behaves the same as fieldset, but can only handle buttons as chidren.
234
294
``` javascript
235
295
{
@@ -241,12 +301,53 @@ and the value is the title of the option.
241
301
}
242
302
```
243
303
304
+ ### button
305
+
244
306
* button* can have a ``` onClick ``` attribute that either, as in JSON Form, is a function * or* a
245
- string with an angular expression, as with ng-click.
307
+ string with an angular expression, as with ng-click. The expression is evaluated in the parent scope of
308
+ the ``` sf-schema ``` directive.
309
+
246
310
``` javascript
247
311
[
248
312
{ type: ' button' , title: ' Ok' , onClick : function (){ ... } }
249
313
{ type: ' button' , title: ' Cancel' , onClick: " cancel()" }
250
314
[
251
315
```
252
316
317
+ ### radios and radiobuttons
318
+ Both type * radios* and * radiobuttons* work the same way, they take a titleMap
319
+ and renders ordinary radio buttons or bootstrap 3 buttons inline. It's a
320
+ cosmetic choice.
321
+
322
+ Ex.
323
+ ``` javascript
324
+ function FormCtrl ($scope ) {
325
+ $scope .schema = {
326
+ type: " object" ,
327
+ properties: {
328
+ choice: {
329
+ type: " string" ,
330
+ enum: [" one" ," two" ]
331
+ }
332
+ }
333
+ };
334
+
335
+ $scope .form = [
336
+ {
337
+ key: " choice" ,
338
+ type: " radiobuttons" ,
339
+ titleMap: {
340
+ one: " One" ,
341
+ two: " More..."
342
+ }
343
+ }
344
+ ];
345
+ }
346
+ ```
347
+
348
+
349
+ Contributing
350
+ ------------
351
+
352
+ All contributions are welcome! We're trying to use [ git flow] ( http://danielkummer.github.io/git-flow-cheatsheet/ )
353
+ so please base any merge request on the ** development** branch instead of ** master** .
0 commit comments