@decision6/q-formly

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