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