This form is design to build from a json, it will help us to develop application so rapidly that we don't need to worry about form validation from design and file management
To use Sb form you need to register the Index.vue to your main.js.
or
You can import Index.vue from the sb-form directory and use this component
I register the SB Form alias to sb-form sp we can use it entire the application using <sb-form/> tag
{
props: {
title: String,
fields: Object,
url: String,
resetForm: {
type: Boolean,
default: true
},
callBack: {
type: String,
required: false
}
}
}Currently, SB Form is support the listed props above.
title, fields and url is required
callBack will only execute on axios success
resetForm we can revoke from reset on edit/update
The base (with all required props) db-form will look like this
<sb-form title="Create User" :fields="fields" url="/create-user"/>-
Input Field
string -
Password Field
password -
Text Field
text_field -
Single Select Field - Ajax Support need to add
select_field - Multiple Select Field
-
File Field (Support File Upload)
file_field
Scroll down more to get more information about the fields listed above
Checkout the basic schema of json to generate a html field
{
role: {
label: 'Role',
col: 6,
type: 'select_field',
value: 1,
options: [
{
id: 1,
name: 'Super Admin'
},
{
id: 2,
name: 'Role Two'
}
],
config: {
value: 'id',
display: 'name'
}
}
}Name of the json attribute role will be considered as v-model
so you will see the same name in request payload.
label will be consider as your html label of the field
col bootstrap column. by default, it's col-12
so you can skip it if you don't want to change the column
type You need to define the filed type here. by default, it will take string
value It will need in edit form when you like to preset data in v-model
options Only need in Select and Multiselect
config Currently it's also using in Select Field Only
{
name: {
label: "Full Name",
placeholder: "Enter Full Name",
col: 6,
required: true
}
}{
address: {
label: "Address",
col: 12,
type: 'text_field'
}
} {
password: {
label: "Password",
col: 6,
type: 'password',
required: true
}
}{
role: {
label: 'Role',
col: 6,
type: 'select_field',
value: 1,
options: [
{
id: 1,
name: 'Super Admin'
},
{
id: 2,
name: 'Role Two'
}
],
config: {
value: 'id',
display: 'name'
}
}
}{
permissions: {
label: 'Permissions',
type: 'multiselect_field',
options: [
{id: 1, name: 'Create User'}
],
config: {
value: (value) => value.id,
display: (value) => value.name,
},
ajax: '/ajax-url'
}
}{
image: {
label: 'User Image',
type: 'file_field'
}
}
