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

import React from 'react'
import { Form, Field } from 'react-advanced-form'
import { Input } from 'react-advanced-form-addons'

export default class ExampleForm extends React.Component {
  /* Callback method accepts "raw" serialized object */
  mapSerialized = ({ serialized, fields, form }) => {
    const { password, billingAddress: { address  } = serialized
    const [_, street, houseNumber] = address.match(/(.+)(\d+)/)
    
    return {
      ...serialized,
      /* Transforms the serialized value of "password" field */
      password: btoa(password),
      
      /* Beware to preserve field group nested keys */
      billingAddress: {
        street,
        houseNumber,
      },
    }
  }
  
  /* Any subsequent handlers accept transformed "serialized" object */
  registerUser = ({ serialized, fields, form }) => {
    console.log(serialized) // { "username": "admin", "password": "..." }
  }
  
  render() {
    <Form
      action={this.registerUser}
      onSerialize={this.mapSerialized}>
      <Input
        name="username"
        label="Username"
        initialValue="admin"
        required />
      <Input
        name="password"
        label="Password"
        initialValue="foo"
        required />
      <Field.Group name="billingAddress">
        <Input
          name="address"
          initialValue="Baker st. 12" />
      </Field.Group>
    </Form>
  }
}