Coder Social home page Coder Social logo

aizigao / vue-hooks-form Goto Github PK

View Code? Open in Web Editor NEW

This project forked from beizhedenglong/vue-hooks-form

0.0 0.0 0.0 2.7 MB

Building forms with vue composition API.

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

License: MIT License

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

vue-hooks-form's Introduction

Vue Hooks Form · license build status Coverage Status

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

Edit Vue Hooks Form 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

beizhedenglong avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.