Skip to content

Commit b091080

Browse files
committed
Merge branch 'release/v0.1.0'
2 parents b7aede2 + c663806 commit b091080

16 files changed

+490
-111
lines changed

CHANGELOG

+8
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,11 @@
1+
v0.1.0
2+
------
3+
We're celebrating actual useful functionality by bumping minor version, yay!
4+
* ```radios``` and ```radiobuttons``` supports, works the same but looks different.
5+
* Added ```conditional``` type to hide/show parts of a form.
6+
* Bugfixes
7+
8+
19
v0.0.4
210
------
311
* Fieldsets now properly merge schema defaults.

README.md

+105-4
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ Angular Schema Form
33

44
Generate forms from a JSON schema, with AngularJS!
55

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)
77
...where you can edit the schema or the form definition and see what comes out!
88

99

@@ -41,14 +41,15 @@ function FormController($scope) {
4141
title: {
4242
type: "string",
4343
enum: ['dr','jr','sir','mrs','mr','NaN','dj']
44+
}
4445
}
4546
};
4647

4748
$scope.form = [
4849
"*",
4950
{
5051
type: "submit",
51-
title: "Save",
52+
title: "Save"
5253
}
5354
];
5455

@@ -64,6 +65,7 @@ Schema Form currently supports the following form field types:
6465
|:--------------|:------------------------|
6566
| fieldset | a fieldset with legend |
6667
| section | just a div |
68+
| conditional | a section with a ```ng-if``` |
6769
| actions | horizontal button list, can only submit and buttons as items |
6870
| text | input with type text |
6971
| textarea | a textarea |
@@ -73,7 +75,8 @@ Schema Form currently supports the following form field types:
7375
| select | a select (single value)|
7476
| submit | a submit button |
7577
| button | a button |
76-
78+
| radios | radio buttons |
79+
| radiobuttons | radio buttons with bootstrap buttons |
7780

7881

7982
Default form types
@@ -205,6 +208,8 @@ Ex.
205208
Specific options per type
206209
-------------------------
207210

211+
### fieldset and section
212+
208213
*fieldset* and *section* doesn't need a key. You can create generic groups with them.
209214
They do need a list of ```items``` to have as children.
210215
```javascript
@@ -217,6 +222,59 @@ They do need a list of ```items``` to have as children.
217222
}
218223
```
219224

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
220278

221279
*select* and *checkboxes* can take an object, ```titleMap```, where key is the value to be saved on the model
222280
and the value is the title of the option.
@@ -230,6 +288,8 @@ and the value is the title of the option.
230288
}
231289
```
232290

291+
### actions
292+
233293
*actions* behaves the same as fieldset, but can only handle buttons as chidren.
234294
```javascript
235295
{
@@ -241,12 +301,53 @@ and the value is the title of the option.
241301
}
242302
```
243303

304+
### button
305+
244306
*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+
246310
```javascript
247311
[
248312
{ type: 'button', title: 'Ok', onClick: function(){ ... } }
249313
{ type: 'button', title: 'Cancel', onClick: "cancel()" }
250314
[
251315
```
252316

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**.

bower.json

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
{
22
"name": "angular-schema-form",
3-
"version": "0.0.4",
3+
"main": [
4+
"dist/schema-form.min.js",
5+
"dist/bootstrap-decorator.min.js"
6+
],
7+
"version": "0.1.0",
48
"authors": [
59
"Textalk",
610
"David Jensen <[email protected]>"

dist/bootstrap-decorator.min.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)