beizhedenglong / vue-hooks-form Goto Github PK

View Code? Open in Web Editor NEW

145.0 8.0 11.0 1.06 MB

Building forms with vue composition API.

Home Page: https://beizhedenglong.github.io/vue-hooks-form/

License: MIT License

JavaScript 9.10% Vue 12.57% TypeScript 73.70% HTML 4.63%

vue-components vue-composition-api vue-hooks-form vueuse

vue-hooks-form's Introduction

Vue Hooks Form ·

Building forms with Vue composition API.

The API is not stable and might change in the future.

Docs

Visit https://beizhedenglong.github.io/vue-hooks-form/.

Installation

  yarn add vue-hooks-form

Features

UI decoupling: Since It does not contain any UI code, It can be easily integrated with other UI libraries.
Easy to adoptable: Since form state is inherently local and ephemeral, it can be easily adopted.
Easy to use: No fancy stuffs, just reactive values/errors.
TypeScript support.

Quickstart

<template>
  <form @submit="onSubmit">
    <label>Username</label>
    <input v-model="username.value" :ref="username.ref" />
    <p v-if="username.error">{{ username.error.message }}</p>
    <label>Password</label>
    <input v-model="password.value" :ref="password.ref" type="password" />
    <p v-if="password.error">{{ password.error.message }}</p>
    <button type="submit">submit</button>
  </form>
</template>

<script>
import { useForm } from 'vue-hooks-form'

export default {
  setup() {
    const { useField, handleSubmit } = useForm({
      defaultValues: {},
    })
    const username = useField('username', {
      rule: { required: true },
    })
    const password = useField('password', {
      rule: {
        required: true,
        min: 6,
        max: 10,
      },
    })
    const onSubmit = (data) => console.log(data)
    return {
      username,
      password,
      onSubmit: handleSubmit(onSubmit),
    }
  },
}
</script>

Live Demo

API(TODO)

`useForm`

const {
  values,
  getFieldValues,
  errors,
  validateFields,
  validateField,
  get,
  set,
  useField,
  handleSubmit
} = useForm({
  defaultValues: {},
  shouldUnregister: true,
  validateMode: 'change',
})

`useField`

const {
 ref,
 value,
 error,
 validate
} = useField(path, options)

Credits

This project was inspired by react-hook-form, formik, and many other form libraries.

vue-hooks-form's People

Contributors

Stargazers

Watchers

Forkers

vue-hooks-form's Issues

Reset Functionality Missing

expecting

const { reset } = useForm()

reset()

calling reset() would reset values to the first state and defaultValue if provided

how do I highlight the errors that came from the server?

hi! thanks for lib!
but how i do it?
what is the right way?

for example - an error when such an email already exists in the database

Is this library still maintained?

I love the react hook form and Vue3 , so I find this similar library for Vue3. But it had not been updated since January 2021.If this library will be maintained, I want to contribute my effort. @beizhedenglong

hi! how to validate array of checkboxes

for example this array:

<input name="room[]" type="checkbox" />
<input name="room[]" type="checkbox" />
<input name="room[]" type="checkbox" />

tnx!

Misc. TypeScript/Dpcumentation issues

I've been using the library and love it (Great job!)

However there are a couple issues I've found with using TypeScript (Especially with Volar for VSCode, since now <template> syntax is included in type checking):

`field.ref` typing incorrect for use-case(?)

Error:

Vue 3 is expecting the following type for :ref bindings:

declare type VNodeRef = string | Ref | ((ref: object | null, refs: Record<string, any>) => void);

Error binding example incorrect(?)

Given the documentation for error handling:

<p v-if="password.error">{{ password.error.message }}</p>

This is erroring, since the error property is an Array - not sure if the typings are wrong, or the intended functionality

compatibility @vuejs/composition-api

Hello,

Is it possible to have a version compatible with https://github.com/vuejs/composition-api for an integration with https://github.com/nuxt-community/composition-api ?