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!

onInvalid

onSubmitStart

Last modified 3yr ago

Copy link

Contents

Specification

Parameters

Example