Form Reactivity #

Reactive values are one of the core features of VueJS. When working with Forms in the VueJS ecosystem, I would like to be able to work with the state of the form, as with a reactive object. This library provides such an opportunity. We'll consider all the ways to use it from the most versatile to the most targeted.

Hook useFormValues #

This hook returns a reactive form state object. This is the easiest way to get reactivity, because he immediately returns all form values:

import {useFormValues, Form} from "jenesius-vue-form"

const form = new Form();
const values = useFormValues(form); // Reactive {}

Now when the form state changes, values will be automatically updated:

<template>
  <input-field name = "address.city.code"/>
  <p>{{values}}</p> <!--Reactive {}-->
</template>

{}

ComputedValue #

Why pull the entire reactive state of the form when you don't have to? Basically on the form we need 2-3 reactive values. You can use the computed approach introduced in VueJS for this. The library provides a method ComputedValue which returns a reactive computed value for the given name:

import {ComputedValue, Form} from "jenesius-vue-form"

const form = new Form();
const cityCode = ComputedValue(form, "address.city.code"); // ComputedRef 

Now this value can be used as a reactive calculated reference:

<template>
  <input-field name = "address.city.code" label = "Address.City.Code"/>
  <p>Computed value: {{cityCode}}</p> <!--Reactive {}-->
</template>

Computed value:

If you are using TypeScript you can pass a template so that TS understands what type will be returned:

const cityCode = ComputedValue<string>(form, "address.city.code");

oninput Listener #

Although all of the above methods are somehow built on the oninput listener, its separate use is also comfortable. Using this listener, you can subscribe to changes to a specific field and call a callback when value has been changed:

const form = new Form();
form.oninput("address.city.code", (newValue, oldValue) => {
    // Run something
})

If just a function is passed to oninput , then a callback will be called for every change. note that callback parameters are slightly different from the previous one:

const form = new Form();
form.oninput(({name, newValue, oldValue}) => {
    // Run something
})

The input parameter for the callback is the IComparisonResult interface:

interface IComparisonResult {
    name: string,
    newValue: any,
    oldValue: any
}

Hook useFormState #

This hook returns a reactive object that stores the state of the Form in itself. Currently, has the following interface:

interface FormReactiveState {
    changed: boolean,
    disabled: boolean
}

To use this reactive state, you need to pass an instance of the form to the hook:

const form = new Form();
const state = useFormState(form); // { changed, disabled }