Vue Form Component

A minimal component to simplify working with forms in Vue. You still create the form UI yourself, but with access to form data and any validation errors that are returned upon submission. Assumes responses from the server follow a given format.

Installation

npm install @dymantic/vue-forms

Component Props

| Prop | Type | Required | Default | Note | | ----------- | ------------------------------- | -------- | ------- | --------------------------------------------------------------- | | url | string | yes | none | form is submitted by POST to this url | | form-model | Form (from @dymantic/vue-forms) | yes | none | keeps track of data and error messages | | redirect-to | string | no | none | if present, page will navigate here after successful submission |

The Form Object

The value passed to the form-model prop must be of the type Form, imported as such: import {Form} from @dymantic/vueforms. This gives you a constructor to create a form object, by passing an object containing the default values of your form object. For example:

const form = new Form({
    username: "Harry",
    school: "Hogwarts"
});

// form.data.username === "Harry"
// form.data.school === "Hogwarts"

Continuing with the example above, the form object can be used as such:

form.data.username = "Victor"
form.data.school = "Durmstrang"

// form.data.username === "Victor"
// form.data.school === "Durmstrang"

form.resetFields();

// form.data.username === "Harry"
// form.data.school === "Hogwarts"

form.resetFields({username: "Victor"});

// form.data.username === "Victor"
// form.data.school === "Hogwarts"

form.setValidationErrors({school: ["not a recognised school"]});

// form.errors.school === "not a recognised school"
// form.errors.username === ""

form.clearErrors();

// form.errors.school === ""
// form.errors.username === ""

Using the form data and errors in your template: You can get access to the form object by destructing it out of the slot scope as such slot-scope={formData, formErrors, waiting} as seen in the example provided below. This allows you to bind form fields with v-model, and use validation errors in your template.

Component Events

| Event | Payload | Notes | | ---------------- | ----------------------------- | -------------------------------------------- | | submission-okay | response data | fired on successful submission | | submision-failed | {status: [RESPONSE STATUS]} | recieved a 4** or 5** response from server | | form-error | none | a non-network error occured during submision |

Note

This component assumes that if the form submission fails validation, the server will respond with a 422 status code, and include the validation error messages that follow the following format(it is default Laravel behaviour).

// in response body
{
    "errors": {
        "username": ["The username is not available", "The username contains invalid characters"]
    }
}

Example usage

As a basic sample, lets assume we are making a simple component to save/update a username

// in your own component/page

<template>
    <div>
        // ... your template code
        <vue-form url="/usernames"
                  :form-model="formModel"
                  @submisison-okay="usernamePersisted"
                  @submission-failed="handleError"
        >
            <div slot-scope="{formData, formErrors, waiting}">
                <div :class="{'has-error': formErrors.username}">
                    <label for="username">Username</label>
                    <span class="text-danger" v-show="formErrors.title">{{ formErrors.title }}</span>
                    <input type="text" name="title" v-model="formData.username" id="username">
                </div>
                <button type="submit" :disabled="waiting">
                    Save
                </button>
            </div>
        </vue-form>
        // ... more template code
    </div>
</template>

<script>
    import {Form} from "@dymantic/vue-forms"

    export default {

        data() {
            function() {
                formModel: new Form({username: "default username"})
            };
        },

        methods: {
            usernamePersisted(response_data) {
                // reponse data is what was returned by server as response. You may use it to update the form data.
                // You may also just reset the form this.form.resetFields()
            },

            handleError({status}) {
                //status is the non 200 http status code returned by server
            }
        }
    }
</script>