final-vuerm

Form management solution for Vue.js based on 🏁 Final Form.

Installation

yarn add final-vuerm

or

npm install final-vuerm --save

Simple form example

import { Form, Field, Select, ResetButton, SubmitButton } from 'final-vuerm';

<Form :config="{ onSubmit: handleSubmit }">
  <Field name="fieldName" />
  <Select name="selectName">
    <option>1</option>
    <option>2</option>
    <option>3</option>
  </Select>
  
  <ResetButton>Reset</ResetButton>
  <SubmitButton>Submit</SubmitButton>
</Form>

API

<Form>

Props:

config

Configuration used for creating a form instance. onSubmit is required.
https://github.com/final-form/final-form#config

Example:

{
  onSubmit: handleSubmit
}

subscriptions?

Object containing the values you wish to be updated about.
https://github.com/final-form/final-form#formsubscription--string-boolean-

Example:

{
  active: true,
  dirty: true,
  touched: true,
  valid: true,
  value: true
}

Events:

@update

Returns formState object.
https://github.com/final-form/final-form#formstate

---

<Field>

Props:

config?

Additional field configuration. This is where you can apply field-level validation.
https://github.com/final-form/final-form#fieldconfig

name

Name to register field values to. This is a required prop.
https://github.com/final-form/final-form#field-names

subscriptions?

Object containing the values you wish to be updated about.
https://github.com/final-form/final-form#fieldsubscription--string-boolean-

Example:

{
  dirty: true,
  valid: true,
  values: true
}

type?

Input type. Default is text.

value?

Input value. Used for radio inputs. Use <Form> config prop to set initial values, otherwise they will not be recorded in state.

Events:

@update

Returns formState object.
https://github.com/final-form/final-form#fieldstate

---

<Select>

See props and events definitions from <Field>.

Props:

config?

name

subscriptions?

Events:

@update

---

<ResetButton>

Restores initial values.

---

<SubmitButton>

Submits the form.