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>
    )
  }
}

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

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).