@decision6/vue-formly-quasar

A theme for Vue Formly using Quasar Components

Stats

StarsIssuesVersionUpdatedCreatedSize
@decision6/vue-formly-quasar
5.0.03 years ago4 years agoMinified + gzip package size for @decision6/vue-formly-quasar in KB

Readme

Quasar Formly

Theme for Vue Formly using Quasar components.

Sugestion: for formly-js wrapper, use QFormly plugin.

Requirements

The plugin depends:

Install

yarn add 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'

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

// code below

It's very important that VueFormly plugin has been install before VueFormlyQuasar plugin.

Usage

On template

<formly-form
  :model="model"
  :fields="fields"
  :form="form" />

On script tag

export default {
  data () {
    return {
      form: {},
      model: {
        firstName: '',
        lastName: '',
        age: 1,
        genre: 'M',
        toggle: true,
        select: 'go'
      },
      fields: [
        {
          key: 'firstName',
          type: 'input',
          required: true,
          templateOptions: {
            field: {
              icon: 'person',
              'error-label': 'The person name is invalid'
            },
            input: {
              'float-label': 'First name',
              type: 'text'
            }
          }
        },
        {
          key: 'lastName',
          type: 'input',
          templateOptions: {
            field: {
              icon: 'person'
            },
            input: {
              'float-label': 'Last name',
              type: 'text'
            }
          }
        },
        {
          key: 'age',
          type: 'input',
          required: true,
          validators: {
            isValid: 'model[ field.key ] <= 100 && model[ field.key ] >= 1'
          },
          templateOptions: {
            field: {
              icon: 'person',
              helper: 'Age must be beetwen 1 and 100 years old',
              'error-label': 'Age invalid'
            },
            input: {
              'float-label': 'Age',
              type: 'number',
              min: 1,
              max: 120
            }
          }
        },
        {
          key: 'genre',
          type: 'option-group',
          templateOptions: {
            field: {
              icon: 'person'
            },
            option_group: {
              type: 'radio',
              inline: true,
              options: [
                {
                  value: 'M',
                  label: 'Male'
                },
                {
                  value: 'F',
                  label: 'Female'
                }
              ]
            }
          }
        },
        {
          key: 'select',
          type: 'select',
          templateOptions: {
            field: {
              icon: 'business'
            },
            select: {
              'float-label': 'Works at',
              color: 'secondary',
              inverted: true,
              options: [
                {
                  label: 'Google',
                  value: 'go'
                },
                {
                  label: 'Facebook',
                  value: 'fb'
                }
              ]
            }
          }
        }
      ]
    }
  }
}

See the complete example and others

FormlyForm 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 yes An empty object that will be populated with control information by component

Fields array

The fields array is the same key present on vue-formly interface. Complete documentation are here

Each field has at least two properties in the root of the templateOptions object: field and name of the input type. For the last, the name of key will be Quasar inputs. The component support the follow components:

  • input;
  • select;
  • range;
  • datetime;
  • option group;
  • checkbox;
  • radio;
  • toogle;
  • autocomplete;

To be clearer, follow the diagram below:

const fields = [
  {
    key: 'name', // name from key on model object
    type: 'input', // formly type
    templateOptions: {
      // bind to QField component
      field: {
        'error-message': 'The name is invalid'
      },

      // bind to Quasar component. The key name can be:
      // - input, toogle, radio, checkbox;
      // - autocomplete, datetime, option_group
      // - select and range
      input: {
        'float-label': 'Type your name'
      }
    }
  }
]

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.