form

@k-ramel/driver-form

Form driver for k-ramel

• Main repository: k-ramel

Examples

/* store.js */
import { createStore } from 'k-ramel'
import form from '@k-ramel/driver-form'

export default createStore(
  {
    /* your store description */
  },
  {
    drivers: {
      form: form({ path: 'ui.form', getState: store => store.ui.form }) // default is { path: 'form', getState: store => store.form }
    },
  },
)

In a reaction (See main documentation about listeners/reactions)

/* reaction.js */

export const login = (store, action, { form, http }) => {
  const loginValues = form('login').get()
  http('LOGIN').post('/api/login', loginValues)
}

export const setError = (action, store, { form }) => {
  form('login').setErrors({ code: 'login_error' })
}

In a component container (See main documentation about @k-ramel/react)

/* input.container.js */

import { inject } from '@k-ramel/react'
import Component from './input'

const mapStore = inject((store, { formName, field }, drivers) => {
  const form = drivers.form(formName)
  return {
    value: form.get(field),
    error: form.getErrors(field),
    onChange: (e) => { form.onChange(field)(e.target.value) },
  }
})

export default mapStore(Component)

API

Local to a form

These functions are availables on form that is returned by this call: drivers.form(formName) where formName is your form name.

function	description
set(<object>)	set values to the formName form, and remove the old ones
update(fieldName)(value)	update the value of the given fieldName to the formName form
addOrUpdate(<object>)	add or update given values to the formName form
setErrors(<object>)	set errors to the formName form, and remove the old ones
addOrUpdateErrors(<object>)	add or update errors to the formName form
resetErrors()	remove all errors to the formName form
reset()	remove all errors and values to the formName form
---	---
exists()	test that the formName form exists
get()	retrieve the key/value object from the formName form, all fields are retrieved
get(<string>)	retrieve the value of the given field name from the formName form
getErrors()	retrieve the key/value error object from the formName form
getErrors(<string>)	retrieve error of the given field name from the formName form

Batched to all given forms at once

These functions are used right into the drivers.form field without giving a name to it.

function	description
set([{ name: <string>, values: <object> }, ...])	set values to the form identified by name, older values are removed
addOrUpdate([{ name: <string>, values: <object> }, ...])	add or update values to the form identified by name
resetErrors([<string>, ...])	reset errors for all the given form names
reset([<string>, ...])	reset errors and values for all the given form names
---	---
find(<regexp>)	find all form names that matches the given regexp

Helpers

• drivers.form.getUpdatedValues(action) will return an object of all updated pair (field name -> field value) for the given action.
• drivers.form.getUpdatedEntries(action) will return an array of all updated pair (field name -> field value) for the given action.
• drivers.form.getUpdatedFieldNames(action) will return an array of all updated field names for the given action.