0.2.0 • Published 3 years ago
vue-provide-form v0.2.0
VueProvideForm
Installation
// with npm
npm install vue-provide-form
// with yarn
yarn add vue-provide-form
Usage
Import Vue and VueProvideForm in your code:
import { createApp } from "vue";
import VueProvideForm from "vue-provide-form";
createApp(App)
.use(VueProvideForm)
.mount("#app");
※ Vue 2 not supported yet
Provide state to Form in the top level components
※ Array not supported yet
import { provideForm } from "vue-provide-form";
const state = {
name: "",
nameKana: "",
email: "",
family: {
child: {
name: "",
age: 12
}
},
};
provideForm({ defaultValues: state });
To using form state, inject in the children components
import { defineComponent, computed } from "vue";
import { useForm } from "vue-provide-form";
export default defineComponent({
name: "FormContent",
components: {
BaseForm,
FormItem,
InputText,
},
setup(props, context) {
const { inputs, validate } = useForm<State>();
return {
submit,
inputs
};
}
});
Wrap your inputs with the InputProvider
use v-model
<InputProvider
schema="required"
name="family.child.age"
label="label"
v-slot:default="{ errors, isValid }"
>
<input v-model="fieldValues.family.child.age" />
<div>
<div>validationMessage: {{ errors }}</div>
<div>isValid: {{ isValid }}</div>
</div>
</InputProvider>
import { useForm } from "vue-provide-form";
export default defineComponent({
setup() {
const { fieldValues } = useForm<State>();
return {
fieldValues,
};
}
});
manually set value
<InputProvider
schema="required"
name="family.child.age"
label="label"
v-slot:default="{ value, setValue, errors, isValid }"
>
<input :value="value" @input="setValue" />
<div>
<div>validationMessage: {{ errors }}</div>
<div>isValid: {{ isValid }}</div>
</div>
</InputProvider>
Submit form
If there is a validation error, the callback function will not be executed
<template>
<button @click="handleSubmit(handleSave)" />
</template>
import { useForm } from "vue-provide-form";
setup(props, context) {
const { inputs, handleSubmit, fieldValues } = useForm<State>();
const handleSave = (data: State) => {
console.log(data);
};
return {
handleSubmit,
handleSave
};
}
Next
- support Array
- support custom validate schema
- add options(immediately validation etc... )