Skip to content

Commit 763d4f2

Browse files
committed
Merge branch 'release/almostthere'
2 parents e08f436 + 599d9fa commit 763d4f2

File tree

1,570 files changed

+591325
-179
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

1,570 files changed

+591325
-179
lines changed

.gitignore

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
11
node_modules
2-
coverage
2+
coverage

README.md

Lines changed: 164 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,17 @@ Angular Schema Form
44
Generate forms from a JSON schema, with AngularJS!
55

66
Schema Form is a set of AngularJS directives (and a service..) that can create a form directly from a json schema
7-
definition and also validate against that schema. The defaults may be fine for a lot cases, but you can also
7+
definition and also validate against that schema. The defaults may be fine for a lot cases, but you can also
88
customize it, changing order and type of fields.
99

1010

1111
Schema Form is inspired by the nice [JSON Form](https://github.com/joshfire/jsonform) library and aims to be roughly
1212
compatible with it, especially it's form defintion. What sets Schema Form apart from JSON Form is that Schema Form
1313
aims to be deeply integrated with AngularJS, i.e. to use the standard AngularJS way of handling forms. It also uses
1414
[tv4](https://github.com/geraintluff/tv4) for validation which means its compatible with version 4 of the json schema
15-
standard. Schema Form, as a default, generates bootstrap 3 friendly HTML.
15+
standard. Schema Form, as a default, generates bootstrap 3 friendly HTML.
1616

17-
Another thing that sets Schema Form apart is that it, at the moment, doesn't implement half of what JSON Form
17+
Another thing that sets Schema Form apart is that it, at the moment, doesn't implement half of what JSON Form
1818
does, nor have any documentation! Which of course we hope to remedy soon.
1919

2020

@@ -35,25 +35,181 @@ function FormController($scope) {
3535
type: "object",
3636
properties: {
3737
name: { type: "string", minLength: 2, title: "Name", description: "Name or alias" },
38-
title: {
38+
title: {
3939
type: "string",
4040
enum: ['dr','jr','sir','mrs','mr','NaN','dj']
4141
}
4242
};
43-
44-
43+
4544
$scope.form = [
4645
"*",
47-
{
46+
{
4847
type: "submit",
4948
title: "Save",
5049
}
5150
];
52-
51+
5352
$scope.data = {};
5453
}
5554
```
5655
56+
Form types
57+
----------
58+
Schema Form currently supports the following form field types:
59+
60+
| Type | Becomes |
61+
|:--------------|:------------------------|
62+
| fieldset | a fieldset with legend |
63+
| section | just a div |
64+
| actions | horizontal button list, can only submit buttons as items |
65+
| text | input with type text |
66+
| textarea | a textarea |
67+
| number | input type number |
68+
| checkbox | a checkbox |
69+
| checkboxes | list of checkboxes |
70+
| select | a select (single value)|
71+
| submit | a submit button |
72+
73+
74+
75+
Default form types
76+
------------------
77+
78+
| Schema | Form type |
79+
|:-------------------|:------------:|
80+
| "type": "string" | text |
81+
| "type": "number" | number |
82+
| "type": "integer" | number |
83+
| "type": "boolean" | checkbox |
84+
| "type": "object" | fieldset |
85+
| "type": "string" and a "enum" | select |
86+
| "type": "array" and a "enum" in array type | checkboxes |
87+
88+
89+
90+
Form definition and "*"
91+
----------------------
92+
If you don't supply a form definition, it will default to rendering the after the defaults taken
93+
from the schema.
94+
95+
A form definition is a list where the items can be
96+
* A star, ```"*"```
97+
* A string with the dot notated name/path to a property, ```"name"```
98+
* An object with that defines the options for a form field., ```{ key: "name" }```
99+
100+
The star, ```"*"``` means "use the default for the entire schema" and is useful when you want the
101+
defaults plus an additional button.
102+
103+
ex.
104+
```javascript
105+
[
106+
"*",
107+
{ type: 'submit', title: 'Save' }
108+
]
109+
```
110+
111+
The string notation, ```"name"```, is just a shortcut for the object notation ```{ key: "name" }```
112+
where key denotes what part of the schema we're creating a form field for.
113+
114+
115+
Overriding field types and order
116+
--------------------------------
117+
The order of the fields is technically undefined since the order of attributes on an javascript
118+
object (which the schema ends up being) is undefined. In practice it kind of works though.
119+
If you need to override the order of the forms, or just want to be sure, specify a form definition.
120+
121+
ex.
122+
```javascript
123+
var schema = {
124+
"type": "object",
125+
"properties": {
126+
"surname": { "type": "string" },
127+
"firstname": { "type": "string" },
128+
}
129+
}
130+
131+
[
132+
"firstname",
133+
"surname"
134+
]
135+
```
136+
137+
You can also override fields to force the type and supply other options:
138+
ex.
139+
140+
```javascript
141+
var schema = {
142+
"type": "object",
143+
"properties": {
144+
"surname": { "type": "string" },
145+
"firstname": { "type": "string" },
146+
}
147+
}
148+
149+
[
150+
"firstname",
151+
{
152+
key: "surname",
153+
type: "select",
154+
itemNames: {
155+
"Andersson": "Andersson",
156+
"Johansson": "Johansson",
157+
"other": "Something else..."
158+
}
159+
}
160+
]
161+
```
162+
163+
Options
164+
-------
165+
166+
General options most field types can handle:
167+
```javascript
168+
{
169+
key: "address.street", //The dot notatin to the attribute on the model
170+
type: "text", //Type of field
171+
title: "Street", //Title of field, taken from schema if available
172+
notitle: false, //Set to true to hide title
173+
description: "Street name", //A description, taken from schema if available
174+
}
175+
```
176+
57177
178+
Specific options per type
179+
-------------------------
58180
181+
*fieldset* and *section* doesn't need a key. You can create generic groups with them.
182+
They do need a list of ```items``` to have as children.
183+
```javascript
184+
{
185+
type: "fieldset",
186+
items: [
187+
"name",
188+
{ key: "surname", notitle: true }
189+
]
190+
}
191+
```
192+
193+
194+
*select* and *checkboxes* can take an object, ```itemNames```, where key is the value to be saved on the model
195+
and the value is the title of the option.
196+
```javascript
197+
{
198+
type: "select",
199+
itemNames: {
200+
"yes": "Yes I do",
201+
"no": "Hell no"
202+
}
203+
}
204+
```
205+
206+
*actions* behaves the same as fieldset, but can only handle buttons as chidren.
207+
```javascript
208+
{
209+
type: "actions",
210+
items: [
211+
{ type: 'submit', title: 'Ok' }
212+
]
213+
}
214+
```
59215

bower.json

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "angular-schema-form",
3-
"version": "0.0.2",
3+
"version": "0.0.3",
44
"authors": [
55
"Textalk",
66
"David Jensen <david.lgj@gmail.com>"
@@ -9,7 +9,6 @@
99
"globals"
1010
],
1111
"license": "MIT",
12-
"private": true,
1312
"ignore": [
1413
"**/.*",
1514
"node_modules",
@@ -19,5 +18,8 @@
1918
],
2019
"dependencies": {
2120
"tv4": "~1.0.15"
21+
},
22+
"devDependencies": {
23+
"angular-ui-ace": "bower"
2224
}
2325
}
Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"name": "ace-builds",
3+
"homepage": "https://github.com/ajaxorg/ace-builds",
4+
"version": "1.1.3",
5+
"_release": "1.1.3",
6+
"_resolution": {
7+
"type": "version",
8+
"tag": "v1.1.3",
9+
"commit": "fc9d2cae9fe8e6e95e74c86a31d21caadd8f9f39"
10+
},
11+
"_source": "git://github.com/ajaxorg/ace-builds.git",
12+
"_target": "~1.1.1",
13+
"_originalSource": "ace-builds"
14+
}

0 commit comments

Comments
 (0)