Field

This component has to be a child within the <Form /> component. This component handles its own state and on any state change it will report it to the <Form /> component which validates the whole form.

Basic Usage

import {
  Form,
  Field,
} from 'react-form-package';

Render a <Form /> with an email <Field /> and a <Button /> component.

<Form>
  <div>
    <div>Email</div>
    <div>
      <Field
        id="email"
        type="email"
        onBlur={state => console.log('blur', state)}
        reuqired
      />
    </div>
  </div>
  <div>
    <Button
      id="submit"
      type="submit"
      onClick={state => {
        alert(JSON.stringify(state, null, 2))
        alert('open the console to see the whole state...')
        console.log(state)
      }}
    >
      Submit
    </Button>
  </div>
</Form><Form>
  <div>
    <div>Email</div>
    <div>
      <Field
        id="email"
        type="email"
        onBlur={state => console.log('blur', state)}
        reuqired
      />
    </div>
  </div>
  <div>
    <Button
      id="submit"
      type="submit"
      onClick={state => {
        alert(JSON.stringify(state, null, 2))
        alert('open the console to see the whole state...')
        console.log(state)
      }}
    >
      Submit
    </Button>
  </div>
</Form>

Props

Property	Type	Required	Default	Description
id	String	true
type	String	true		`checkbox`, `date`, `textarea`, `datetime-local`, `email`, `number`, `tel`, `text`, `password`, `time`, `url`, `file`
required	Bool	false	false
min	String (digit or date (YYYY-MM-DD))	false		`text`, `textarea`, `password`: has to have at least `min` characters; `number`, `date`: has to be at least `min`
max	String (digit or date (YYYY-MM-DD))	false		`text`, `textarea`, `password`: has to have at least `min` characters; `number`, `date`: has to be at least `min`
match	RegEx	false		the input value has to match the `regular expression`
sameAs	String	the input value has to have the same value as the input field with the id specified in `sameAs`
preOnChange	Func	false		manipulate the state before its validated (see State Manipulation)
errorMessage	String	false		define your own custom error message for the input
onFocus	Func	false		get access to the state of the form when the user focus on the input
onChange	Func	false		get access to the state of the form when the user changes the input
onBlur	Func	false		get access to the state of the form when the user blurs the input
dynamic	Bool	false		only needed for dynamically added fields
field	Object	false		only needed for dynamically added fields. This object holds at least `id`, `type`, and may hold `min`, `max`, `required`
bintTo	String, Array	false		only needed for binding input fields. The id/ids of the input/inputs you want to manipulate
bintToAllways	Bool	false		only needed for binding input fields. Only needed if you want that the bindToCallback is triggered even the bound input field was already touched (blurred)
bindToCallback	Func	false		only needed for binding input fields. The callback to set the target's (`bindTo`) input value, which gets called `onChange` (return a single value or an array of values)

Field

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Basic Usage

Props

Basic Usage