A wrapper component that adds AJAX functionality to the form
npm install doz-form-async
Live here
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>
`
}
});
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);
}
});
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 |
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 |
Name | Args | Description |
---|---|---|
$getData | Returns an object with form data | |
$loadData | {object} data |
Fill input through an object |
<script src="https://unpkg.com/fabioricali/dist/bundle.min.js"></script>
You can view the changelog here
doz-form-async is open-sourced software licensed under the MIT license