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).
initialValues
rules
Last updated 8 months ago
Parameter name	Type	Description
`serialized`	`Object`	Serialized fields of the form.
`fields`	`Object`	Reference to all fields.
`form`	`Object`	Form component reference.