Form

Last updated 5 months ago

Specification
Component that wraps the set of fields and controls their data flow.
The key focus of a form design is getting rid of obscure configurations and achieving a clear and predictable layout. Although depending on the use case, form shares a lot of functionalities and behaviors. Unifying the latter, depriving the developer from configuring it over and over, is a primary goal of React Advanced Form.
Props
General
Prop name
Type
Description
ref
Function
Getter function for the <Form> component.
​innerRef​
Function
Getter function for the form element.
​action​
Function<Promise>
Submit action handler.
​rules​
​ValidationRules​
Form-specific validation rules.
​messages​
​ValidationMessages​
Form-specific validation messages.
Callbacks
Callback name
Descripton
onFirstChange
Called when the form becomes dirty.
onReset
Called after the form has been reset.
onSubmitStart
Called when the submit has started (form is valid).
onSubmitted
Called after successful submit.
onSubmitFailed
Called on failed submit.
onSubmitEnd
Called when the submit has ended, regardless of its status.
onInvalid
Called when the submit failed due to form being invalid.
Read more about each prop and callback under Form callbacks.
Methods
Form methods are available under its reference object.
Method name
Type
Descripton
​validate​
Function<Promise>
Validates form manually.
​serialize​
Function<Object>
Serializes form manually.
​reset​
Function
Resets the fields to their initial values.
​submit​
Function<Promise>
Submits the form manually.
Learn more about each method under Form methods.
Example
Let's create a simple form that has a single input and an action handler.
React Advanced Form is field-centric. That means that you may want to configure a set of composite field components as the first step of integrating this solution into your application.
import React from 'react'
import { Form } from 'react-advanced-form'
import { Input } from 'react-advanced-form-addons'
​
export default class Example extends React.Component {
  registerUser = ({ serialized, fields, form }) => {
    console.log(serialized) // { "firstName": "John" }
  }
  
  render() {
    return (
      <Form action={this.registerUser}>
        <Input
          name="firstName"
          label="First name"
          rule={/[a-zA-Z]/}
          initialValue="John"
          required />
      </Form>
    )
  }
}
You can use FormProvider to specify application-wide validation rules and messages, or you can pass them to a specific Form using rules and messages props respectively.
​

Components - Previous

FormProvider

Props

Prop name	Type	Description
`ref`	`Function`	Getter function for the `<Form>` component.
`innerRef`	`Function`	Getter function for the `form` element.
`action`	`Function<Promise>`	Submit action handler.
`rules`	`ValidationRules`	Form-specific validation rules.
`messages`	`ValidationMessages`	Form-specific validation messages.

Method name	Type	Descripton
`validate`	`Function<Promise>`	Validates form manually.
`serialize`	`Function<Object>`	Serializes form manually.
`reset`	`Function`	Resets the fields to their initial values.
`submit`	`Function<Promise>`	Submits the form manually.

Callback name	Descripton
`onFirstChange`	Called when the form becomes dirty.
`onReset`	Called after the form has been reset.
`onSubmitStart`	Called when the submit has started (form is valid).
`onSubmitted`	Called after successful submit.
`onSubmitFailed`	Called on failed submit.
`onSubmitEnd`	Called when the submit has ended, regardless of its status.
`onInvalid`	Called when the submit failed due to form being invalid.