q-formly

A wrapper for vue-formly-quasar theme.

Requirements

The plugin depends:

• Vue Formly
• Vue Formly Quasar
• Quasar

Install

yarn add q-formly vue-formly vue-formly-quasar

On main.js on Quasar template:

// code above

import Vue from 'vue'
import Quasar from 'quasar'
import VueFormly from 'vue-formly'
import VueFormlyQuasar from 'vue-formly-quasar'
import QFormly from 'q-formly'

// Install plugins
Vue.use(Quasar)
Vue.use(VueFormly)
Vue.use(VueFormlyQuasar)
Vue.use(QFormly)

// code below

Usage

On template

<q-formly
  :model="model"
  :fields="fields"
  @submit="onSubmit"
  @clear="onClear" />

On script tag

export default {
  data: () => ({
    model: {},
    fields: []
  }),
  methods: {
    onSubmit () {},
    onClear () {}
  }
}

See the complete example and others

QFormly component

Properties

| Property | Type | Required | Description | |:----------------:|:-------:|:--------:|:-------------------------------------------------:| | model | Object | yes | Form model | | fields | Array | yes | An array of objects with each field on your form. | | form | Object | no | An object that will be receive form controls props from formly plugin, like $valid an error object. | | forceFormDisable | Boolean | no | Force disable save button |

Events

| Event | Description | |:-------:|:-------------------------------------:| | @submit | Submit form when valid | | @clear | Function when clear button is clicked |