doz-form-async

A wrapper component that adds AJAX functionality to the form

Install

npm install doz-form-async

Live here

Usage

Globally

import Doz from 'doz'
import 'doz-form-async'

Locally

import Doz from 'doz'
import DozFormAsync from 'doz-form-async/lib'

Doz.component('my-wrapper', {
    components: {
        'also-a-custom-name': DozFormAsync
    },
    template() {
        return `
            <also-a-custom-name></also-a-custom-name>
        `
    }
});

Example

const app = new Doz({
    root: '#app',
    template() {
        return `
            <doz-form-async
                d:on-submit="$onSubmit"
                d:on-validationerror="$onValidationError"
                d:on-success="$onSuccess"
                d:on-error="$onError"
             >
                <form>
                    <input placeholder="First name" required="required" name="firstName">
                    <input placeholder="Email" required="required" type="email" name="email">
                    <button type="submit">Submit</button>
                </form>
            </doz-form-async>
        `
    },
    $onSubmit(cmp) {
        console.log('$onSubmit', cmp);
    },
    $onValidationError(errors) {
        console.warn('$onValidationError', errors);
    },
    $onSuccess(response) {
        console.log('$onSuccess', response);
    },
    $onError(error) {
        console.error('$onError', error);
    }
});

Props

| Name | Default | Description | | ---- | ------- | ----------- | | ajax | true | Ajax mode enabled | | resetOnSuccess | true | Reset input after success | | classError | error | css error class | | eventChangeOnLoad | true | Trigger input event change |

Events

| Name | Args | Description | | ---- | ---- | ----------- | | success | {object} response, {object} cmp | Triggered on request success | | validationerror | {object} errors, {object} cmp | Triggered on validation error | | error | {object} error, {object} cmp| Triggered on request error | | submit | {object} cmp | Triggered on submit |

Methods

| Name | Args | Description | | ---- | ---- | ----------- | | $getData | | Returns an object with form data| | $loadData | {object} data | Fill input through an object |

CDN unpkg

<script src="https://unpkg.com/fabioricali/dist/bundle.min.js"></script>

Changelog

You can view the changelog here

License

doz-form-async is open-sourced software licensed under the MIT license

Author

Fabio Ricali