https://github.com/blocka/vue-simpleform

Form library for vue. Inspired by Formik for react.
https://github.com/blocka/vue-simpleform

forms vue

Last synced: about 1 month ago
JSON representation

Form library for vue. Inspired by Formik for react.

• Host: GitHub
• URL: https://github.com/blocka/vue-simpleform
• Owner: blocka
• License: mit
• Created: 2017-10-15T18:36:17.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2024-04-15T20:10:54.000Z (9 months ago)
• Last Synced: 2024-11-16T21:19:54.116Z (about 2 months ago)
• Topics: forms, vue
• Language: JavaScript
• Size: 890 KB
• Stars: 38
• Watchers: 2
• Forks: 6
• Open Issues: 18
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vue-simpleform

A form library for vue, inspired by Formik for react

## Is it really simple?

I think it is, but really I couldn't think of a better name

## Basic Usage

```html

    

    

        

        {{errors('email')}}

        

        Submit

    

    

    import SimpleForm from 'vue-simpleform'

    

    export default {

        data () {

            return {

                initialValues: {

                    email: null

                }

            }

        },

        methods: {

            handleSubmit ({ values, errors, setSubmitting, setSubmitted }) {

                // if form is valid, errors will be undefined

            },

            validate (values) {

                return {

                    email: 'Email is invalid'

                }

            }

        },

        components: { SimpleForm }

    }

```

The main component takes two props: 

1. `value`. This is used to set the initial form state, which will be a deep copy of what is passed in. 

2. `validate`. This is a function which is called to validate the form. This happens when any of the fields are updated, or the form is submitted. ~It can return a promise to do asynchronous validation~ as of 1.0.0 it only works synchronously

And `$emits` a `submit` event when the form is submitted. The callback for the submit event takes an object with following keys:

1. values

2. errors

3. setSubmitting

4. setSubmitted

If the form is valid, `errors` will be undefined

The scoped slot is passed the following props:

1. values. All the form values, but "flattened".

2. errors. A function taking a name of a field, and returning it's error message (if invalid.

3. touched. A function taking a name of a field, and returning if the field was touched

4. input. Input and blur are functions ready to be passed in as event handlers. They are only useful on a real form field (eg., and  element. The element needs a `name` attribute as well

5. blur

6. setValue. Manually set a field value. Useful for integrating a custom component

7. setTouched. Ditto, but for setting touched

8. handleSubmit. A callback that will initiate the submittion process

9. submitted

10. submitting

## Other components

There are two other components which are useful for encapsulating common patterns, or removing boilerplate. They are available as named exports.

1. ``. This is used to make a set of fields which are prefixed. It can be used also to set up an array of fields

 ```html

 

   

```

It can be passed a single component, or a scoped slot. The same props passed in from `SimpleForm` will be passed in (as props to the component, or as props of the scoped slot), but will all be namespaced.

2. ``

 This component removes some of the boilerplate in hooking up inputs

```html

```

Will render an 

   

      Red

      Yellow

      Green

    

```

```html

  

```

The custom component will have `value` and `class` (with the erroClass) injected as a props, and `input` and `blur` as listeners. So the custom component has to `$emit` `input` with the new value, and `blur`.

3. ``

```html

```

Displays an error if the given field is touched and has an error to show.

By defaul will use a div, but the `tag` prop can be used to use a different element.

## License

MIT