Skip to content

Commit aa4c6bd

Browse files
committed
updated readme
1 parent 6c8efde commit aa4c6bd

File tree

1 file changed

+51
-24
lines changed

1 file changed

+51
-24
lines changed

README.md

Lines changed: 51 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
#vue-formly-bootstrap
2-
A plugin for [Vue Formly](https://github.com/matt-sanders/vue-formly) which adds multiple form fields according to Twitter Bootstrap.
2+
A plugin for [Vue Formly](https://github.com/matt-sanders/vue-formly) which adds multiple form fields according to Twitter Bootstrap.
3+
4+
##Version 2
5+
Note that this is version 2 of Vue Formly Bootstrap, compatible with Vue Formly 2 and Vue 2. If you are looking for version 1 compatibility check out the [Version 1 Branch](https://github.com/formly-js/vue-formly-bootstrap/tree/1.0).
36

47
##Installation
58
```
@@ -22,21 +25,30 @@ Vue.use(VueFormlyBootstrap);
2225
let vm = new Vue({
2326
el: '#app',
2427
data: {
25-
form: {
26-
name: {
28+
form: {},
29+
model: {
30+
name: '',
31+
sex: '',
32+
comments: ''
33+
}
34+
fields: [
35+
{
36+
key: 'name',
2737
type: 'input',
2838
label: 'Your name'
2939
},
30-
sex: {
40+
{
41+
key: 'sex',
3142
type: 'select',
3243
label: 'Sex',
3344
options: ['Male', 'Female']
3445
},
35-
comments: {
46+
{
47+
key: 'comments',
3648
type: 'textarea',
3749
label: 'Comments'
3850
}
39-
}
51+
]
4052
},
4153
methods: {
4254
doSomething: function(){}
@@ -45,27 +57,50 @@ let vm = new Vue({
4557
```
4658
```html
4759
<div id="el">
48-
<formly-form :form="form" @submit="doSomething">
60+
<formly-form :form="form" :model="model" :fields="fields" @submit="doSomething">
4961
<button>Submit</button>
5062
</formly-form>
5163
</div>
5264
```
5365
If you include the script it will be installed for you.
5466

55-
For more advanced details about how to use Vue Formly check out the [docs](https://www.gitbook.com/book/matt-sanders/vue-formly/details).
67+
For more advanced details about how to use Vue Formly check out the [docs](https://www.gitbook.com/book/matt-sanders/vue-formly/content/v/2.0).
5668

5769
Note that this is still a work in progress so some fields are under construction. See the [To Do](#to-do) section for what's on the watchlist.
5870

59-
##Options
71+
##Options & Attributes
72+
73+
###Form Attributes
74+
The form object is used to track the state of the form. Whether it is valid or not, whether there are any errors etc. The following attributes will be set under each field key. e.g. if you had a field with the key of `name` you could access these under `form.name`
75+
76+
| Attribute | Type | Default | Description |
77+
| $dirty | `boolean` | `false` | ***RESTRICTED*** This is set by the system and is just there for your reference. It gets set to `true` upon blur or change, whichever happens first. |
78+
| $active | `boolean` | `false` | ***RESTRICTED*** Also set by the system and is set to true on focus. |
6079

6180
###Global options
62-
These options are used by all the different field types. Some fields may have special options and these will be specified below.
81+
These options are used by all the different field types. Some fields may have special options and these will be specified below. Check the [Vue Formly docs](https://matt-sanders.gitbooks.io/vue-formly/content/v/2.0/) for more info.
6382

6483
| Property | Type | Default | Description |
6584
| --- | --- | --- | --- |
66-
| $dirty | `boolean` | `false` | ***RESTRICTED*** This is set by the system and is just there for your reference. It gets set to `true` upon blur or change, whichever happens first. |
67-
| $active | `boolean` | `false` | ***RESTRICTED*** Also set by the system and is set to true on focus. |
6885
| type | `string` | `null` | ***REQUIRED*** this is the input type. Check the [Available Inputs](#available-inputs) section for a list of currently available inputs.
86+
87+
####Select options
88+
89+
| Property | Type | Default | Description |
90+
| --- | --- | --- | --- |
91+
| options | `array` | `null` | Pass either an array of strings or objects. Objects require a `label` and `value` property. If a string is passed then it will be used for the value and the label. eg: `options: ['Foo', 'Bar']` or `options: [{ label: 'Foo', value: 'bar'},{label: 'Bar', value: 'foo'}]` |
92+
93+
####List options
94+
95+
| Property | Type | Default | Description |
96+
| --- | --- | --- | --- |
97+
| options | `array` | `null` | Pass either an array of strings or objects. Objects require a `label` and `value` property. If a string is passed then it will be used for the value and the label. eg: `options: ['Foo', 'Bar']` or `options: [{ label: 'Foo', value: 'bar'},{label: 'Bar', value: 'foo'}]` |
98+
| inputType | `string` | `checkbox` | The 'type' attribute to pass to each input. Can be either 'checkbox' or 'radio' |
99+
100+
###Template Options
101+
These should be added to the `templateOptions` property. Some input types may have specific options which can be used here and will be specified below.
102+
103+
| Property | Type | Default | Description |
69104
| onBlur | `function(e)` | `null` | A function to run on @blur event |
70105
| onFocus | `function(e)` | `null` | A function to run on @focus event |
71106
| onClick | `function(e)` | `null` | A function to run on @click event |
@@ -76,27 +111,19 @@ These options are used by all the different field types. Some fields may have sp
76111
| classes | `object` | `null` | Pass an object of classes to be added to the element. Follows the Vue bindings where each key matches a boolean value. eg `{ 'class-a': true, 'class-b': false }` In this case class-a will be attached. |
77112
| id | `string` | `null` | An ID string to attach to the element |
78113

79-
80-
###Input options
114+
####Input options
81115

82116
| Property | Type | Default | Description |
83117
| --- | --- | --- | --- |
84-
| inputType | `string` | `text` | The 'type' attribute to pass to the input. |
85-
| files | `Object` | `null` | ***RESTRICTED*** If you have set `inputType` to equal `file` then the `files` parameter will be populated by VueFormly to contain the corresponding files that have been uploaded |
118+
| type | `string` | `text` | The 'type' attribute to pass to the input. Can be any valid input type. |
86119

87-
88-
###Select options
120+
####List options
89121

90122
| Property | Type | Default | Description |
91123
| --- | --- | --- | --- |
92-
| options | `array` | `null` | Pass either an array of strings or objects. Objects require a `label` and `value` property. If a string is passed then it will be used for the value and the label. eg: `options: ['Foo', 'Bar']` or `options: [{ label: 'Foo', value: 'bar'},{label: 'Bar', value: 'foo'}]` |
93-
94-
###List options
95-
| Property | Type | Default | Description |
96-
| --- | --- | --- | --- |
97-
| options | `array` | `null` | Pass either an array of strings or objects. Objects require a `label` and `value` property. If a string is passed then it will be used for the value and the label. eg: `options: ['Foo', 'Bar']` or `options: [{ label: 'Foo', value: 'bar'},{label: 'Bar', value: 'foo'}]` |
98124
| inputType | `string` | `checkbox` | The 'type' attribute to pass to each input. Can be either 'checkbox' or 'radio' |
99125

126+
100127
##Available Inputs
101128
* input
102129
* select

0 commit comments

Comments
 (0)