You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Jun 27, 2023. It is now read-only.
Copy file name to clipboardExpand all lines: README.md
+4-205Lines changed: 4 additions & 205 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -19,17 +19,17 @@ Implementing handcrafted forms can be:
19
19
1. Costly
20
20
2. Time-consuming
21
21
22
-
Specially if you need to create a very large form, in which the inputs are similar to each other, and they change frequently to meet rapidly changing business and regulatory requirements.
22
+
Especially if you need to create a very large form, in which the inputs are similar to each other, and they change frequently to meet rapidly changing business and regulatory requirements.
23
23
24
-
So, will not be more economical to create the forms dynamically? Based on metadata that describes the business object model?
24
+
So, wouldn't it be more economical to create the forms dynamically? Based on metadata that describes the business object model?
And then create the fields on your component's data structure, to create the fields you can import the factory function `FormField` from the library core:
|`submit`||`DynamicForm`| Emits whenever the submit button has been clicked and the form is valid (no errors), returns all the form values in an Object |
139
-
|`form-error`||`DynamicForm`| Emits whenever the submit button has been clicked and the form is invalid (with errors), returns all errors |
140
-
|`change`||`DynamicForm`| Emits every time there is a value changed on the form, returns all the form values in an Object without the need ob submitting |
141
-
142
-
A small example of a form without submit button
143
-
144
-
```html
145
-
<template>
146
-
<dynamic-form
147
-
:id="testForm.id"
148
-
:fields="testForm.fields"
149
-
@change="valuesChanged"
150
-
/>
151
-
</template>
152
-
```
153
-
154
-
```js
155
-
...
156
-
constyourAwesomeComponent= {
157
-
name:'your-awesome',
158
-
methods: {
159
-
valuesChanged(values) {
160
-
this.formData= {
161
-
...this.formData,
162
-
...values,
163
-
};
164
-
},
165
-
}
166
-
}
167
-
...
168
-
```
169
-
170
-
### Select input
171
-
172
-
```js
173
-
...
174
-
newFormField({
175
-
type:'select',
176
-
label:'Category',
177
-
name:'category',
178
-
options: [
179
-
{ value:null, text:'Please select an option' },
180
-
{ value:'arduino', text:'Arduino' },
181
-
{ value:'transistors', text:'Transistors' },
182
-
],
183
-
}),
184
-
...
185
-
```
186
-
187
-
### Radio and Checkboxes
188
-
189
-
```js
190
-
...
191
-
newFormField({
192
-
type:'checkbox',
193
-
label:'Read the conditions',
194
-
name:'conditions',
195
-
inline:false,
196
-
}),
197
-
newFormField({
198
-
type:'radio',
199
-
label:'Prefered Animal',
200
-
name:'animal',
201
-
inline:true,
202
-
options: [
203
-
{ text:'Dogs', value:'dogs' },
204
-
{ text:'Cats', value:'cats' },
205
-
{ text:'Others', value:'others' },
206
-
],
207
-
}),
208
-
...
209
-
```
210
-
211
-
### Validation
212
-
213
-
This library offers a simple validation system using the property `validations` as an array of `FormValidation`objects containing the validation function and the text in case of error.
214
-
215
-
To use it you need the following code:
216
-
217
-
```js
218
-
import {
219
-
FormField,
220
-
FormValidation,
221
-
required,
222
-
email,
223
-
pattern,
224
-
} from'@asigloo/vue-dynamic-forms';
225
-
226
-
constyourAwesomeComponent= {
227
-
name:'your-awesome',
228
-
data() {
229
-
return {
230
-
testForm: {
231
-
id:'test-form',
232
-
fields: [
233
-
newFormField({
234
-
type:'text',
235
-
label:'Name',
236
-
name:'name',
237
-
}),
238
-
newFormField({
239
-
type:'email',
240
-
label:'Email',
241
-
name:'email',
242
-
validations: [
243
-
newFormValidation(required, 'This field is required'),
244
-
newFormValidation(email, 'Format of email is incorrect'),
245
-
],
246
-
}),
247
-
newFormField({
248
-
type:'password',
249
-
label:'Password',
250
-
name:'password',
251
-
validations: [
252
-
newFormValidation(required, 'This field is required'),
'Password must contain at least 1 Uppercase, 1 Lowercase, 1 number, 1 special character and min 8 characters max 10',
258
-
),
259
-
],
260
-
}),
261
-
],
262
-
},
263
-
};
264
-
},
265
-
};
266
-
267
-
exportdefaultyourAwesomeComponent;
268
-
```
269
-
270
-
### Styling themes
271
-
272
-
The components are unstyled by default, so you can customize them with your own styles. If you want a more "ready to go" solution you can import on of the themes we have included in `src/styles/themes/`
<divid="app" data-server-rendered="true"><divclass="theme-container"><divclass="theme-default-content"><h1>404</h1><blockquote>That's a Four-Oh-Four.</blockquote><ahref="/" class="router-link-active">
0 commit comments