formango v2.0.31
Getting started
Installation
pnpm i formango
The validation of this package relies on Zod.
Documentation
Refer to the documentation for a more in depth look.
Why Go Bananas for Formango
Formango takes the hassle out of form validation in your Vue applications, providing solid benefits that enhance your development process: 1. Type-Safe Confidence: Formango is built with TypeScript at its core, ensuring that your form validations are robust and free from type-related surprises. Catch errors at compile-time and enjoy a more confident development experience. 2. Built-in Zod Integration: Formango is built to integrate with Zod, a powerful schema validation library. This means you can define your data structures with Zod and effortlessly apply these schemas to your Vue forms using Formango. 3. Clean and Maintainable: Say goodbye to tangled validation logic. Formango promotes a clean and declarative approach to form validation, making your codebase easier to understand and maintain. 4. Flexibility in Your Hands: As a headless validation library, Formango adapts to your needs, whether it's handling complex and custom forms or a simple login form. Customize the validation to fit your specific use cases without compromising on quality. 5. Vue Ecosystem Friendly: Built-in devtools makes it easy to debug your complex forms. 6. Fruity: It follows the trend of fruit-based Vue libraries.
Usage Example
<script setup lang="ts">
import { useForm } from 'formango'
import { z } from 'zod'
// Create a schema
const exampleForm = z.object({
name: z.string().min(1),
email: z.string().email(),
})
// Parse the schema to `useForm` along with a function to handle the submit.
// Optionally, you can also pass an object to prepare the form.
const { form, onSubmitForm } = useForm({
schema: exampleForm,
initialState: {
name: 'Foo',
email: 'foo@mail.com',
},
})
onSubmitForm((values) => {
/* Values type is inferred from the schema, hande your submit logic here.
Will only get here if the form is fully valid.
{
email: string
name: string
}
*/
console.log(values)
})
// Now you can register fields on the form, which are fully typed.
// These fields will handle the actual data-binding
const name = form.register('name')
const email = form.register('email')
</script>
<template>
<CustomInput v-bind="name" />
<CustomInput v-bind="email" />
<button @click="form.submit">
Submit
</button>
</template>
Refer to the form, field and array field API for more details.
3 days ago
3 days ago
16 days ago
20 days ago
28 days ago
28 days ago
29 days ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
8 months ago
8 months ago
9 months ago