React Advanced Form
Getting started
Validation
GitHub
Search…
Introduction
General
Comparison
Migration guides
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
Validation messages
High-order components
createField
Components
FormProvider
Form
Props
innerRef
initialValues
action
rules
messages
Methods
Callbacks
Field.Group
Field
Recipes
Generating a form
Utilizing functions
Developers
Contributing
Powered By
GitBook
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
).
Previous
initialValues
Next
rules
Last modified
3yr ago
Copy link
Contents
Specification
Definition
Parameters
Example
Simple example
Example with Redux