Sprintify Formly

Sprintify is a lightweight Vue plugin that makes reactive form creation a cinch.

Installation

1. Instal via npm

npm install sprintify-formly

2. Import and use Sprintify Formly

import Vue from 'vue'
import Form from 'sprintify-formly'

Vue.use(Form)

Quick start

You can create a simple form this way:

<form @submit.prevent="send()">
    <v-input name="firstname"></v-input>
    <v-input name="lastname"></v-input>
    <v-input name="age"></v-input>
</form>

export default {
    data () {
        return {
            form: this.$form.create({
                schema: {
                    firstname: null,
                    lastname: null,
                    age: null
                }
            })
        }
    },
    methods: {
        send () {
            this.form.post('/admin/user')
            .then(response => {
                alert('User successfully created!')
            })
            .catch(error => {
                alert('Whoops!')
            })
        }
    }
}

Dynamic Lists

To generate dynamic lists, you proceed like this:

<form @submit.prevent="send()">
    <button @click="form.tags.add()">Add a new tag</button>
    <div v-for="(tag, i) in form.tags.list">
        <v-input :name="'tags.' + i + '.name'"></v-input>
        <v-input :name="'tags.' + i + '.category'"></v-input>
        <button @click="form.tags.remove(i)">Remove this tag</button>
    </div>
</form>

export default {
    data () {
        return {
            form: this.$form.create({
                schema: {
                    tags: [
                        {
                            name: null,
                            category: null
                        }
                    ]
                }
            })
        }
    }
}

To add an element to a list: form.tags.add().

To remove an element from a list: form.tags.remove(i).

Documentation

Configuration

Vue.use(Form, {
    locales: {"en": "English", "fr": "Français"}, // All app's locales
    locale: "en", // Default locale
    onFormSuccess: onSuccess, // callback when a form makes a successful request
    onFormFail: onFail // callback when a form makes a failed request
})

Set custom data

You can set custom data for each field this way:

export default {
    data () {
        return {
            form: this.$form.create({
                schema: {
                    firstname: null,
                    tags: [
                        {
                            name: null,
                            category: null
                        }
                    ]
                },
                data: {
                    firstname: 'John',
                    tags: [
                        {name: "red", category: "color"},
                        {name: "blue", category: "color"}
                    ]
                }
            })
        }
    }
}

License

Code released under MIT license.

Copyright (c) 2018, François Lévesque.