React Advanced Form
  • Introduction
  • General
    • Comparison
      • Compared to Formik
      • Compared to Final form
    • Migration guides
      • 1.4.x → 1.5.x
    • FAQ
  • Getting started
    • Installation
    • Creating fields
    • Creating form
    • Validation rules
    • Validation messages
    • Applying validation
    • Handle submit
  • Architecture
    • Argument properties
    • Referencing
    • Field lifecycle
    • Controlled fields
    • Reactive props
  • Validation
    • Getting started
    • Validation schema
      • Rule definition
      • Reactive rule
    • Validation messages
  • High-order components
    • createField
      • Options
      • Field presets
      • Exposed props
  • Components
    • FormProvider
    • Form
      • Props
        • innerRef
        • initialValues
        • action
        • rules
        • messages
      • Methods
        • setValues()
        • setErrors()
        • reset()
        • validate()
        • serialize()
        • submit()
      • Callbacks
        • onFirstChange
        • onReset
        • onInvalid
        • onSerialize
        • onSubmitStart
        • onSubmitted
        • onSubmitFailed
        • onSubmitEnd
    • Field.Group
    • Field
      • Props
        • rule
        • asyncRule
        • skip
      • Callbacks
        • onFocus
        • onChange
        • onBlur
  • Recipes
    • Generating a form
    • Utilizing functions
  • Developers
    • Contributing
Powered by GitBook
On this page
  • Specification
  • Definition
  • Parameters
  • Example
  • Simple example
  • Example with Redux
  1. Components
  2. Form
  3. Props

action

Specification

Action performed on the successful submit of the form.

This function is called only when the form is valid.

Definition

type Action = (params) => Promise<any>

Parameters

Parameter name

Type

Description

serialized

Object

Serialized fields of the form.

fields

Object

Reference to all fields.

form

Object

Form component reference.

action function must always return a Promise.

Example

Simple example

import React from 'react'
import { Form } from 'react-advanced-form'
import { Input } from 'react-advanced-form-addons'

export default class RegistrationForm extends React.Component {
  registerUser = ({ serialized, fields, form }) => {
    return fetch('https://back.end/user', {
      method: 'POST',
      body: JSON.stringify(serialized),
    })
  }

  render() {
    return (
      <Form action={this.registerUser}>
        <Input
          name="username"
          label="Username"
          required />
        <Input
          name="password"
          label="Password"
          required />
      </Form>
    )
  }
}

Example with Redux

import React from 'react'
import { connect } from 'react-redux'
import { Form } from 'react-advanced-form'
import { Input } from 'react-advanced-form-addons'
import { registerUser } from '@store/user/actions'

class RegistrationForm extends React.Component {
  registerUser = ({ serialized, fields, form }) => {
    return this.props.registerUser(serialized)
  }

  render() {
    return (
      <Form action={this.registerUser}>
        <Input
          name="username"
          label="Username"
          required />
        <Input
          name="password"
          label="Password"
          required />
      </Form>
    )
  }
}

export default connect(null, { registerUser })(RegistrationForm)

You need to use a dedicated Redux middleware for the actions to return a Promise (i.e. redux-thunk or redux-saga).

PreviousinitialValuesNextrules

Last updated 6 years ago

You can use form prop to transform the serialized fields object prior to accepting them in the action handler.

onSerialize