vue-formly

by formly-js

formly-js / vue-formly

JavaScript powered forms for Vue.js

214 Stars 32 Forks Last release: over 2 years ago (v2.5.8) MIT License 124 Commits 11 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Vue Formly

Vue Formly is a JS based form builder heavily inspired by Angular Formly. Vue Formly was designed to provide an easy way to keep your forms consistent and to remove bloat from your code. As there's no "one way" to design your forms, Vue Formly allows you to create custom input types which you can use in your form schemas. Vue Formly itself does not come with any inputs pre-loaded but a set of Boostrap form inputs can be installed over at Vue Formly Bootstrap.

NOTE This is version 2 of Vue Formly and is only compatible with Vue 2.x. If you are wanting to use this with Vue 1.x then check out the Vue Formly 1 Branch.

Installation

npm install vue-formly

Or via a script

html

Usage

Take a look at the docs for extended information about using Formly and creating custom input types. But here is a quick example: NOTE that for Vue Formly to work correctly you must also include a set of input types. You can either create your own or check out Vue Formly Bootstrap which has many already created for you.

html
Submit
js
new Vue({
   el: '#app',
   data: {
      model: {
         name: '',
         email: '',
         password: ''
      },
      form: {},
      fields: [
         {
            key: 'name',
            type: 'input',
            required: true
         },
         {
            key: 'email',
            type: 'input',
            templateOptions: {
               type: 'email'
            },
            required: true,
            validators: {
               validEmail: checkEmailFunction
            }
         },
         {
            key: 'password',
            type: 'input',
            templateOptions: {
               type: 'password'
            },
            required: true,
            validators: {
               validPassword: checkPasswordFunction
            }
         }
      ]
   }
});

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.