ionic-vue-form
v1.2.2
Published
Dynamic form render
Downloads
50
Maintainers
Readme
Ionic Vue Form
Render fully customizable dynamic form with form-field conditional logic.
Install
npm install ionic-vue-form
// Register globally (optional)
import { IonicVueForm } from "ionic-vue-form"
Vue.component("IonicVueForm",IonicVueForm)
// Register locally (optional)
<script>
import { IonicVueForm } from 'ionic-vue-form'
export default {
components: {
IonicVueForm
}
}
<script>
Basic usage
<template>
<div>
<IonicVueForm :formFields="form" btnText="Submit" @submit="submit" />
</div>
</template>
<script>
import { IonicVueForm } from 'ionic-vue-form'
export default {
components: {
IonicVueForm
},
data () {
return {
form: [
{
key: "email",
label: "Email"
},
{
key: "password",
label: "Password
}
]
}
},
methods: {
submit(data) {
// Submit logic
// data - Form input(s)
}
}
}
</script>
Note
In your project's main.js import and use vee-validate
import VeeValidate from 'vee-validate'
Vue.use(VeeValidate)
Auto-fill example
data
prop takes the data object, binds each key-value pair to the relavent form field
<template>
<div>
<IonicVueForm :formFields="form" :data="formData" btnText="Submit" @submit="submit" />
</div>
</template>
<script>
import { IonicVueForm } from 'ionic-vue-form'
export default {
components: { IonicVueForm },
data () {
return {
form: [
{
key: "first_name",
label: "First name"
},
{
key: "last_name",
label: "Last name
}
],
formData: {
first_name: "John",
last_name: "Doe"
}
}
},
methods: {
submit(data) {
// Submit logic
// data - Form input(s)
}
}
}
</script>
Props
|Name|Type|Required|Default|Description
|---|---|---|---|---|
|formFields|Array
|true
|-|List of fields to render|
|data|Object
|false
|-|Form datta (if you need to auto-fill the form)|
|btnText|String
|false
|Continue|Submit button text|
|wrapperClass|String
|false
|-|Form wrapper class|
Events
|Event|Description|Parameters| |---|---|---| |submit|Submit form|-| |fileUpload|Useful when you want to handle file processing separately |-|
Field Properties
- key
required | String
Must be unique, the key will be used in formData. - type
optional | String
Input type, defaults totext
. - label
optional | String
Input field's label - validation
optional | String
Field validation rules, Ionic vue form uses VeeValidate - class
optional | String
Input CSS class - rows
optional | Integer
rows attribute for textarea input - rows
optional | Integer
cols attribute for textarea input - options
required | Array
List of option values for select dropdown - condition
optional | Object
Show number field if email value is [email protected]
{
key: "email",
label: "Email",
},
{
key: "number",
type: "number",
label: "Number",
condition: {
key: "email",
value: "[email protected]"
}
}
- component is
required
iftype
iscomponent
. If the component requires props you can use props property which takes an object
This is useful when you want to use a 3rd party component in your form. In the example below, I want to use vue-multiselect in my form.
<script>
import multiselect from "vue-multiselect";
export default {
data() {
form: [
{
key: "category",
label: "Select Category",
type: "component",
component: multiselect,
props: {
options: [],
multiple: true,
closeOnSelect: false,
clearOnSelect: false,
hideSelected: true,
preserveSearch: true,
trackBy: "category_label",
label: "category_label"
}
}
]
}
}