DOCSEARCHbyAlgolia
Submit Docs

VFM

website·Indexed 30 days ago

https://www.chenchangqin.com/vfm/

A Vue-powered form management library developed in TypeScript. VFM provides simple, practical APIs for building forms with support for nested fields, array fields, virtual fields, and built-in validators. It includes components such as Field, FieldArray, VirtualField, and FormProvider, as well as the Form<T, VFK> class for managing form state.

Tokens
18.6K
Snippets
130
Records
156
Agent score
40%

What's inside VFM

  1. Overview of vfm form management library

    vfm is a form management library developed in pure TypeScript with comprehensive type definitions. It is designed to be simple and practical, leveraging Vue's reactivity system to build forms without requiring additional dependencies. Key features include support for nested fields, array fields, virtual fields, and a set of built-in validators.

  2. Overview of VFM library features

    VFM is a Vue-powered form management library designed with a focus on simplicity and developer experience. Key features include:

    • TypeScript Integration: Developed fully in TypeScript with comprehensive type definitions.
    • Vue Reactivity: Leverages Vue's reactivity system to build forms without requiring additional external dependencies.
    • Field Support: Supports nested fields, array fields, and virtual fields.
    • Validation: Includes a variety of built-in validators.

  3. VFM API Overview

    VFM provides a set of tools for form management including:

    • Core Classes: Form
    • Components: Field, FieldArray, FormProvider, VirtualField
    • Hooks (Use Functions): useForm, useField, useFieldArray, useVirtualField, useProvideForm
    • Utilities: createForm, createFieldArray, and a validators object.

  4. Access form instances in child components

    To avoid prop-drilling the form instance, use FormProvider or useProvideForm in a parent component to inject the form into the component tree. Child components can then retrieve the form instance using the useForm hook. For better TypeScript type inference, pass the form getter function to useForm.
    import { useForm } from 'vfm';
import { getForm } from '../form';

// With type hints via form getter
const form = useForm(getForm);

// Without type hints
const form = useForm();

  6. Share form state across sub-components

    To use a form instance in nested components, wrap the form in a <FormProvider> and use the useForm hook within the child component to retrieve the form instance.
    <!-- Parent Component -->
<FormProvider :form="form">
  <BaseInfo />
</FormProvider>

<!-- Child Component (BaseInfo.vue) -->
<script setup lang="ts">
import { Field, useForm } from 'vfm';
import { getForm } from '../form';

const form = useForm(getForm);
</script>
<template>
  <Field :form="form" name="baseInfo.birthDay" ... />
</template>

  7. Use vfm forms in child components

    To access a form instance within a child component, use the useForm hook. This allows the child component to register nested fields (using dot notation like baseInfo.birthDay) and access the form state without passing the form object through every prop.
    <script setup lang="ts">
import { Field, useForm } from 'vfm';
import { getForm } from '../form';

const form = useForm(getForm);
</script>

<template>
  <Field
    :form="form"
    name="baseInfo.birthDay"
    :rules="[{ required: true }]"
    #default="{ field }"
  >
    <input v-bind="field" />
  </Field>
</template>

  8. Access form state in sub-components

    To avoid prop-drilling the form instance, use FormProvider or useProvideForm in a parent component to inject the form into the component tree. Sub-components can then retrieve the form instance using the useForm hook. For better TypeScript type inference, pass the form getter function to useForm.
    import { useForm } from 'vfm';
import { getForm } from '../form';

// With type hints via form getter
const form = useForm(getForm);

// Without type hints
const form = useForm();

  9. Access form state in sub-components

    To use form fields in nested components, use the useForm hook. This allows the sub-component to access the form instance and its state without passing the form object through every layer of props.
    <script setup lang="ts">
import { Field, useForm } from 'vfm';
import { getForm } from '../form';

// Access the form instance
const form = useForm(getForm);
</script>

<template>
  <Field :form="form" name="baseInfo.birthDay" #default="{ field }">
    <input v-bind="field" />
  </Field>
</template>

  11. Initialize a Form instance

    The Form class manages form state. It is initialized with an options object that defines initial values, default values, and touch behavior.
    const form = new Form({
  initValues: { /* ... */ },
  defaultValues: { /* ... */ }, // Optional
  readonly: false,              // Optional
  touchType: 'BLUR'             // Optional: 'FOCUS' | 'BLUR'
});

  12. Access form instances in child components

    To avoid prop-drilling the form instance, use FormProvider or useProvideForm to provide the form via Vue's Dependency Injection. Child components can then retrieve the form instance using the useForm hook. For better TypeScript intellisense, pass the form getter to useForm in the child component.
    import { useForm } from 'vfm';
import { getForm } from '../form';

// With type intellisense
const form = useForm(getForm);

// Without type intellisense
const form = useForm();