Built-In Event Handlers

Sync Field Value
Focused & Touched State
Clear & Reset Form or Fields
Nested Array Elements
Submitting the Form
Handle Files

onChange(e) & onToggle(e)
onFocus(e) & onBlur(e)
onClear(e) & onReset(e)
onAdd(e) & onDel(e)
onSubmit(e)
onDrop(e)

Custom Event Handlers

Sync Field Value

onChange(e) & onToggle(e)

Handler	Affected Property	Executed Hook
onChange(e)	value	onChange
onToggle(e)	value	onToggle

Use the onChange(e) or onToggle(e) handler to update the state of the field.

<input
  ...
  onChange={form.$('username').onChange}
/>

If you are using a custom component which doesn't work with the package's built-in sync handler, open an Issue.

Focused & Touched State

onFocus(e) & onBlur(e)

Handler	Affected Property	Executed Hook
onFocus(e)	focused	onFocus
onBlur(e)	touched	onBlur

If you need to track touched or focused state, you can use onFocus(e) or onBlur(e) handlers:

<input
  ...
  onFocus={form.$('username').onFocus}
  onBlur={form.$('username').onBlur}
/>

Clear & Reset

onClear(e) & onReset(e)

Handler	Action	Affected Property	Executed Hook	Result
onClear(e)	clear()	value	onClear	to empty values
onReset(e)	reset()	value	onReset	to default values

On the form instance:

<button type="button" onClick={form.onClear}>Clear</button>
<button type="button" onClick={form.onReset}>Reset</button>

or selecting Specific Field or Nested Fields:

<button type="button" onClick={form.$('members').onClear}>Clear</button>
<button type="button" onClick={form.$('members').onReset}>Reset</button>

Nested Array Elements

onAdd(e) & onDel(e)

Handler	Action	Affected Property	Executed Hook	Result
onAdd(e)	add()	fields	onAdd	Add a field
onDel(e)	del()	fields	onDel	Remove a field

Adding a Field

<button type="button" onClick={hobbies.onAdd}>Add Hobby</button>

or using the field selector:

<button type="button" onClick={form.$('hobbies').onAdd}>Add Hobby</button>

or specify the field value as second argument:

<button type="button" onClick={e => form.$('hobbies').onAdd(e, 'soccer')}>Add Hobby</button>

Deleting a Field

<button type="button" onClick={hobby.onDel}>Delete Hobby</button>

or using the field selector with a field key:

<button type="button" onClick={form.$('hobbies').$(3).onDel}>Delete Hobby</button>

or specify the field path as second argument:

<button type="button" onClick={e => form.onDel(e, 'hobbies[3]')}>Delete Hobby</button>

Submitting the Form

onSubmit(e)

Handler	Action	Affected Property	Executed Hook	FORM	FIELD
onSubmit(e)	submit() > validate()	submitting, validating	onSubmit	YES	YES

The onSubmit(e) will validate the form and will call respectively onSuccess(form) or onError(form) Validation Hooks if they are implemented.

The onSuccess(form) and onError(form) methods takes the form object in input. So you can perform more actions after the validation occurs.

You can easly include the onSubmit(e) handler in your component:

<button type="submit" onClick={form.onSubmit}>Submit</button>

Handle Files

onDrop(e)

Handler	Affected Property	Executed Hook	Result
onDrop(e)	files	onDrop	Retrieve the files

The onDrop(e) Event Handler will retrive the files into the files Field prop and exeute the onDrop Hook function.

Define the field type property as file and then use bind() on your input:

<input multiple=true {...field.bind()} />

Otherwise, (without defining the type prop) delegate the input onChange Handler with the onDrop(e) Handler on the bind() method (or create a custom bindings).

<input
  multiple=true
  {...field.bind({
    onChange: field.onDrop,
  })}
/>

Event Handlers