Skip to content
This repository was archived by the owner on Apr 30, 2018. It is now read-only.

Commit 5e4290d

Browse files
gheltonghelton
committed
changed indents to tabs, added radio
1 parent 030f1ab commit 5e4290d

File tree

1 file changed

+101
-70
lines changed

1 file changed

+101
-70
lines changed

‎README.md

Lines changed: 101 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
## Formly
22
Formly for Angular is an AngularJS module which has directives to help customize and render JSON based forms. The directive originated from a need to allow our users to create surveys and distribute them easily. Currently we've can render the form data from JSON and assign a model to form so we can receive the submitted data.
33

4-
<formly-form result="formData" fields="formFields" options="formOptions" ng-submit="onSubmit()">
5-
</formly-form>
4+
<formly-form result="formData" fields="formFields" options="formOptions" ng-submit="onSubmit()">
5+
</formly-form>
66

77
### Demo : http://Nimbly.github.io/angular-formly/
88

@@ -31,53 +31,53 @@ See `bower.json` and `index.html` in the `master` branch for a full list / more
3131

3232
You can add a formly-form in your HTML templates as shown below.
3333
```html
34-
<formly-form result="formData" fields="formFields" options="formOptions" ng-submit="onSubmit()">
35-
</formly-form>
34+
<formly-form result="formData" fields="formFields" options="formOptions" ng-submit="onSubmit()">
35+
</formly-form>
3636
```
3737

3838
Example data as it would be set in the controller
3939
```javascript
40-
$scope.formData = {};
41-
$scope.formFields = [
42-
{
43-
//the key to be used in the result values {... "username": "johndoe" ... }
44-
key: 'username',
45-
46-
//default value
47-
default: 'uberuser'
48-
type: 'text',
49-
label: 'Username',
50-
placeholder: 'johndoe',
51-
required: true,
52-
disabled: false, //default: false
53-
},
54-
{
55-
key: 'password'
56-
type: 'password',
57-
label: 'Password',
58-
required: true,
59-
disabled: false, //default: false
60-
}
61-
62-
];
63-
64-
$scope.formOptions = {
65-
66-
//Set the id of the form
67-
uniqueFormId: 'myFormId',
68-
69-
//Hide the submit button that is added automaticaly
70-
//default: false
71-
hideSubmit: false,
72-
73-
//Set the text on the default submit button
74-
//default: Submit
75-
submitCopy: 'Login'
76-
};
77-
78-
$scope.onSubmit = function() {
79-
console.log('form submitted:', $scope.formData);
80-
};
40+
$scope.formData = {};
41+
$scope.formFields = [
42+
{
43+
//the key to be used in the result values {... "username": "johndoe" ... }
44+
key: 'username',
45+
46+
//default value
47+
default: 'uberuser'
48+
type: 'text',
49+
label: 'Username',
50+
placeholder: 'johndoe',
51+
required: true,
52+
disabled: false, //default: false
53+
},
54+
{
55+
key: 'password'
56+
type: 'password',
57+
label: 'Password',
58+
required: true,
59+
disabled: false, //default: false
60+
}
61+
62+
];
63+
64+
$scope.formOptions = {
65+
66+
//Set the id of the form
67+
uniqueFormId: 'myFormId',
68+
69+
//Hide the submit button that is added automaticaly
70+
//default: false
71+
hideSubmit: false,
72+
73+
//Set the text on the default submit button
74+
//default: Submit
75+
submitCopy: 'Login'
76+
};
77+
78+
$scope.onSubmit = function() {
79+
console.log('form submitted:', $scope.formData);
80+
};
8181
```
8282

8383
### Creating Form Fields
@@ -143,54 +143,85 @@ When constructing fields use the options below to customize each field object. Y
143143
>`undefined`
144144
145145
### Form Fields
146+
Below is a detailed description of each form fields and its custom properties.
147+
146148
#### Text form field
147149
>The text field allows single line input with a input element set to `type='text'`. It doesn't have any custom properties.
148150
##### default (string)
149151

150152
_Example text field_
151153
```json
152-
{
153-
"type": "text",
154-
"key": "firstName",
155-
"placeholder": "jane doe",
156-
"label": "First name"
157-
}
154+
{
155+
"type": "text",
156+
"key": "firstName",
157+
"placeholder": "jane doe",
158+
"label": "First name"
159+
}
158160
```
159161

160162
---
161163
#### Textarea form field
162-
The textarea field creates multiline input with a textarea element.
164+
>The textarea field creates multiline input with a textarea element.
163165
##### default (string)
164166
##### lines (number)
165167
>`lines` sets the rows attribute for the textarea element.
166168
167169
_Example textarea field_
168170
```json
169-
{
170-
"type": "textarea",
171-
"key": "about",
172-
"placeholder": "I like puppies",
173-
"label": "Tell me about yourself",
174-
"lines": 4
175-
}
171+
{
172+
"type": "textarea",
173+
"key": "about",
174+
"placeholder": "I like puppies",
175+
"label": "Tell me about yourself",
176+
"lines": 4
177+
}
176178
```
177179

178180
---
179181
#### Checkbox form field
180-
The checkbox field allows checkbox input with a input element set to `type='checkbox'`. It doesn't have any custom properties.
182+
>The checkbox field allows checkbox input with a input element set to `type='checkbox'`. It doesn't have any custom properties.
181183
##### default (boolean)
182184

183185
_Example checkbox field_
184186
```json
185-
{
186-
"type": "checkbox",
187-
"key": "checkThis",
188-
"label": "Check this box",
189-
"default": true
190-
}
187+
{
188+
"type": "checkbox",
189+
"key": "checkThis",
190+
"label": "Check this box",
191+
"default": true
192+
}
191193
```
192194

193195
#### Radio form field
196+
>The radio field allows multiple choice input with a series of linked inputs, with `type='radio'`.
197+
##### default (string)
198+
>The default should be set to the `value` of one of the `options`.
199+
##### options (array)
200+
>`options` is an array of options for the radio form field to display. Each option should be an object with a `name`(string) and `value`(string or number).
201+
202+
_Example radio field_
203+
```json
204+
{
205+
"key": "triedEmber",
206+
"type": "radio",
207+
"label": "Have you tried EmberJs yet?",
208+
"default": "no",
209+
"options": [
210+
{
211+
"name": "Yes, and I love it!",
212+
"value": "yesyes"
213+
},
214+
{
215+
"name": "Yes, but I'm not a fan...",
216+
"value": "yesno"
217+
},
218+
{
219+
"name": "Nope",
220+
"value": "no"
221+
}
222+
]
223+
}
224+
```
194225
#### Select form field
195226
#### Number form field
196227
#### Password form field
@@ -205,11 +236,11 @@ _Example checkbox field_
205236
## Development
206237

207238
1. `git checkout master`
208-
1. run `npm install && bower install`
209-
2. test your code using `grunt dev` which hosts the app at `http://localhost:4000`
210-
3. commit your changes
239+
1. run `npm install && bower install`
240+
2. test your code using `grunt dev` which hosts the app at `http://localhost:4000`
241+
3. commit your changes
211242
3. update README, CHANGELOG, bower.json, and do any other final polishing to prepare for publishing
212-
1. git commit changes
243+
1. git commit changes
213244

214245
## Grunt targets
215246
* `grunt dev`: Creates a server for testing at `http://0.0.0.0:4000`

0 commit comments

Comments
 (0)