Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sahibalejandro/form-object
Form object to use with Vue components for sending data to a Laravel application using axios.
https://github.com/sahibalejandro/form-object
axios forms laravel validation vuejs
Last synced: 3 months ago
JSON representation
Form object to use with Vue components for sending data to a Laravel application using axios.
- Host: GitHub
- URL: https://github.com/sahibalejandro/form-object
- Owner: sahibalejandro
- Created: 2017-07-26T06:06:53.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-12-29T21:08:37.000Z (almost 6 years ago)
- Last Synced: 2024-07-19T17:15:41.183Z (4 months ago)
- Topics: axios, forms, laravel, validation, vuejs
- Language: JavaScript
- Homepage:
- Size: 170 KB
- Stars: 70
- Watchers: 4
- Forks: 9
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Form Object
[](https://travis-ci.org/sahibalejandro/form-object)
[](https://www.npmjs.com/package/form-object)
### Important:
__This project still active, feel free to clone, open issues or ask for help__
Form Object is a simple layer on top of axios, it understands the Laravel validation error
responses and handles it for you, now you can focus on the feedback you want to give to
the users.
* [Installation](#installation)
* [Usage](#usage)
* [Clear messages](#clear-messages)
* [Shortcut methods](#shortcut-methods)
* [Array inputs](#array-inputs)
* [Caveats](#caveats)
* [Customization](#customization)
* [Using a custom Axios instance](#using-a-custom-axios-instance)
* [Promises](#promises)
## Installation
NOTE: version *>=1.4.3+* requires Vue *>=1.0*
```bash
# Using the legendary NPM
npm install form-object --save
# Or using Yarn
yarn add form-object
```
## Usage
```vue
Please check the form and try again!
Submit
import Form from 'form-object';
export default {
data() {
return {
user: {name: 'Sahib', photo: null},
form: new Form()
}
},
methods: {
submit() {
this.form.submit('post', '/users', this.user).then(data => {
// This is the data returned from your server.
console.log(data);
}).catch(error => {
// Handle request errors.
});
}
}
}
```
### Clear messages
You can get rid of all error messages calling the `clear` method that belongs to the `Errors` object, like this:
```javascript
this.form.errors.clear();
```
Take note that all messages are removed automatically before sending the request, and in case you need to clear
an specific error message just pass the field's name to the `clear` method, like this:
```javascript
this.form.errors.clear('email');
```
In this way only that one will be removed from the error messages list.
### Shortcut methods
Write `this.form.submit('POST', ...)` can be too verbose for you, if it is the case you can use the
shortcut methods:
#### form.post(url, data)
Send `data` via POST request to the given `url`, same as `form.submit('POST', url, data)`.
#### form.patch(url, data)
Send `data` via PATCH request to the given `url`, same as `form.submit('PATCH', url, data)`.
#### form.put(url, data)
Send `data` via PUT request to the given `url`, same as `form.submit('PUT', url, data)`.
#### form.delete(url, data)
Send `data` via DELETE request to the given `url`, same as `form.submit('DELETE', url, data)`.
#### form.save(url, )
This method will send `resource` via POST or PATCH request to the given `url`, depending on whether
the resource has a property called `id`, for example:
```javascript
const resource = {name: 'John Doe'};
// This call...
form.save('/users', resource);
// Is the same as this call.
form.submit('POST', '/users', resource);
```
And if the `resource` has an `id` property:
```javascript
const resource = {id: 123, name: 'John Doe'};
// Now that resource has an "id" property, this call...
form.save('/users', resource);
// Is the same as this call.
form.submit('PATCH', '/users/123', resource);
```
As you can see, the `save` method will append the `id` to the original `url` automatically.
### Array inputs
Use normal arrays when array inputs are needed, here is a simple example:
```vue
import Form from 'form-object';
export default {
data() {
return {
form: new Form(),
// Fill array as you need, I use null to simplify this example.
product: {
colors: [null, null],
photos: [null, null]
}
};
},
methods: {
async submit() {
await this.form.post('/arrays-support', this.product);
}
}
}
```
And your Laravel validation rules will be something like this:
```php
$rules = [
'colors.*' => 'required',
'photos.*' => 'required|file',
];
```
#### Caveats
Seems like Laravel pass the validation rules for required files if the array
contains at least one element. If you find a workaround for this let me know!
## Customization
You can customize the behaviour by modifying the `Form.defaults` property.
### Using a custom axios instance
In some cases, you will need to use a customized axios instance instead of the
one that comes along with this package, to do this you can attach your own
axios instance to the *object defaults*:
```javascript
import axios from 'axios';
import Form from 'form-object';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
Form.defaults.axios = axios;
```
## Promises
Please read the Axios documentation at https://github.com/mzabriskie/axios#promises