A wrapper for Quasar Modal by using QFormly component


4.0.03 years ago4 years agoMinified + gzip package size for @decision6/formly-modal in KB


formly modal

A wrapper for Quasar QModal by using QFormly


This package has as a dependencies:

  • Vue 2.5.x
  • Quasar 14.x
  • VueFormlyQuasar 2.x


yarn add @decision6/formly-modal


This package exports a single component, FormlyModal. An example of use:

import FormlyModal from '@decision6/formly-modal'

export default {
  components: {

  <FormlyModal />

FormlyModal component


Property Type Required Default Description
model Object yes Form model
fields Array no An array of objects with each field on your form.
fieldsGroup Array no An array of objects to multicolumn form. See the section Multicolumns Form to more details
title String yes Modal title
size String no sm A size to modal. Accepts the following values: sm, lg, xlg, 2xlg
height Number no 550 An specific height to modal
toolbarColor String no primary A color option from Quasar Collor Pallete
forceLoading Boolean no false Force loading state inside modal. This is useful when await async data to inside modal

Vue Events

Vue Event Description Payload
@save Emitted when save button is clicked A function that should be called when the save execution is finished
@open Emitted when open method is called
@close Emitted when close method is called

Multicolumns Form

If only field property is setted, the component will understand that there are only form component. But, there are cases that use multiple forms in one. For this, use fieldsGroup,that is a array of objects with the following properties:

  title: 'Box title',
  color: 'Background color for caption box',
  fields: [] // an array of objects for formly


See the example of the two uses

See the demo

Component Methods

Method Signature Description
open open () {} open modal and emit event
close close () {} close modal and emit event
setModel setMethod (model, isUpdateBkp = false) {} update internalModel and optionally, the model backup

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.