A form library for vue, inspired by Formik for react
I think it is, but really I couldn't think of a better name
<template>
<SimpleForm :value="initialValues" :validate="validate" @submit="handleSubmit">
<template scope="{values, errors, touched, input, blur, setValue, setTouched, handleSubmit, submitted, submitting}">
<form>
<input type="email" v-on="{input, blur}" name="email" :value="values.email" />
<span class="error" v-if="touched('email') && errors('email')">{{errors('email')}}</span>
<button @click.prevent="handleSubmit">Submit</button>
</form>
</template>
</SimpleForm>
</template>
<script>
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 }
}
</script>
The main component takes two props:
value
. This is used to set the initial form state, which will be a deep copy of what is passed in. 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 synchronouslyAnd $emits
a submit
event when the form is submitted. The callback for the submit event takes an object with following keys:
If the form is valid, errors
will be undefined
The scoped slot is passed the following props:
name
attribute as wellThere are two other components which are useful for encapsulating common patterns, or removing boilerplate. They are available as named exports.
<SimpleFormFieldSet>
. This is used to make a set of fields which are prefixed. It can be used also to set up an array of fields
<template v-for="(item, i) of items">
<SimpleFormFieldSet :name="`items[${i}]`" :value="item">
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.
<Field>
This component removes some of the boilerplate in hooking up inputs<Field type="email" name="email" errorClass="error" />
Will render an <input type="email" for the field email. errorClass
is an optional prop. The default value is error
It can also take an element or a custom component
<Field name="favoriteColor">
<select>
<option value="red">Red</option>
<option value="yellow">Yellow</option>
<option value="green">Green</option>
</select>
</Field>
<Field name="customComponentValue">
<CustomComponent />
</Field>
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
.
<Error>
<Error name="email" class="error-label" tag="span">
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.
MIT