action

Specification
Action performed on the successful submit of the form.
This function is called only when the form is valid.
Definition
1
type Action = (params) => Promise<any>
Copied!
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
1
import React from 'react'
2
import { Form } from 'react-advanced-form'
3
import { Input } from 'react-advanced-form-addons'
4
​
5
export default class RegistrationForm extends React.Component {
6
  registerUser = ({ serialized, fields, form }) => {
7
    return fetch('https://back.end/user', {
8
      method: 'POST',
9
      body: JSON.stringify(serialized),
10
    })
11
  }
12
​
13
  render() {
14
    return (
15
      <Form action={this.registerUser}>
16
        <Input
17
          name="username"
18
          label="Username"
19
          required />
20
        <Input
21
          name="password"
22
          label="Password"
23
          required />
24
      </Form>
25
    )
26
  }
27
}
Copied!
You can use onSerialize form prop to transform the serialized fields object prior to accepting them in the action handler.
Example with Redux
1
import React from 'react'
2
import { connect } from 'react-redux'
3
import { Form } from 'react-advanced-form'
4
import { Input } from 'react-advanced-form-addons'
5
import { registerUser } from '@store/user/actions'
6
​
7
class RegistrationForm extends React.Component {
8
  registerUser = ({ serialized, fields, form }) => {
9
    return this.props.registerUser(serialized)
10
  }
11
​
12
  render() {
13
    return (
14
      <Form action={this.registerUser}>
15
        <Input
16
          name="username"
17
          label="Username"
18
          required />
19
        <Input
20
          name="password"
21
          label="Password"
22
          required />
23
      </Form>
24
    )
25
  }
26
}
27
​
28
export default connect(null, { registerUser })(RegistrationForm)
Copied!
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 modified 3yr ago

Copy link

Contents