Basic Usage

If you've installed via NPM:

import VueFormly from 'vue-formly';
import VueFormlyBootstrap from 'vue-formly-bootstrap'; //note that this is optional if you've created your own fields
Vue.use(VueFormly);
Vue.use(VueFormlyBootstrap);

Otherwise if you've just included the script, Formly is good to go. You'll also need to add your input templates. You can create your own fields or install the Vue Formly Bootstrap plugin which has most of the essentials already there for you.

Creating a form

Creating a form is super easy. You just need to define a model and a set of fields. For example:

//app.js
let vm = new Vue({
  el: '#app',
  data: {
    form: {},
    model: {
       fname: '',
       lname: ''
    },
    fields: [
       {
          key: 'fname',
          type: 'input'
       },
       {
          key: 'lname',
          type: 'input'
       }

    ]
  }
});
<div id="app">
  <form>
    <formly-form :form="form" :model="model" :fields="fields"></formly-form>
    <button type="submit">Submit</button>
  </form>
</div>

and that's it! Remember that for this to work you must have added a Formly Field called 'text'.

results matching ""

    No results matching ""