onSerialize

Specification

A callback handler dispatched upon form serialization. Accepts the original serialized fields and return the next state of serialized fields.

Parameters

Param name
Type
Description
serialized
Object
Original serialized fields.
fields
Object
Form fields.
form
Object
Form component reference.

Example

1
import React from 'react'
2
import { Form, Field } from 'react-advanced-form'
3
import { Input } from 'react-advanced-form-addons'
4
5
export default class ExampleForm extends React.Component {
6
/* Callback method accepts "raw" serialized object */
7
mapSerialized = ({ serialized, fields, form }) => {
8
const { password, billingAddress: { address } = serialized
9
const [_, street, houseNumber] = address.match(/(.+)(\d+)/)
10
11
return {
12
...serialized,
13
/* Transforms the serialized value of "password" field */
14
password: btoa(password),
15
16
/* Beware to preserve field group nested keys */
17
billingAddress: {
18
street,
19
houseNumber,
20
},
21
}
22
}
23
24
/* Any subsequent handlers accept transformed "serialized" object */
25
registerUser = ({ serialized, fields, form }) => {
26
console.log(serialized) // { "username": "admin", "password": "..." }
27
}
28
29
render() {
30
<Form
31
action={this.registerUser}
32
onSerialize={this.mapSerialized}>
33
<Input
34
name="username"
35
label="Username"
36
initialValue="admin"
37
required />
38
<Input
39
name="password"
40
label="Password"
41
initialValue="foo"
42
required />
43
<Field.Group name="billingAddress">
44
<Input
45
name="address"
46
initialValue="Baker st. 12" />
47
</Field.Group>
48
</Form>
49
}
50
}
Copied!
Last modified 3yr ago