React Advanced Form
  • Introduction
  • General
    • Comparison
      • Compared to Formik
      • Compared to Final form
    • Migration guides
      • 1.4.x → 1.5.x
    • 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
      • Rule definition
      • Reactive rule
    • Validation messages
  • High-order components
    • createField
      • Options
      • Field presets
      • Exposed props
  • Components
    • FormProvider
    • Form
      • Props
        • innerRef
        • initialValues
        • action
        • rules
        • messages
      • Methods
        • setValues()
        • setErrors()
        • reset()
        • validate()
        • serialize()
        • submit()
      • Callbacks
        • onFirstChange
        • onReset
        • onInvalid
        • onSerialize
        • onSubmitStart
        • onSubmitted
        • onSubmitFailed
        • onSubmitEnd
    • Field.Group
    • Field
      • Props
        • rule
        • asyncRule
        • skip
      • Callbacks
        • onFocus
        • onChange
        • onBlur
  • Recipes
    • Generating a form
    • Utilizing functions
  • Developers
    • Contributing
Powered by GitBook
On this page
  • Specification
  • Props
  • General
  • Callbacks
  • Methods
  • Example
  1. Components

Form

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.

Function

Getter function for the form element.

Function<Promise>

Submit action handler.

Form-specific validation rules.

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.

Methods

Method name

Type

Descripton

Function<Promise>

Validates form manually.

Function<Object>

Serializes form manually.

Function

Resets the fields to their initial values.

Function<Promise>

Submits the form manually.

Example

Let's create a simple form that has a single input and an action handler.

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>
    )
  }
}

PreviousFormProviderNextProps

Last updated 6 years ago

Read more about each prop and callback under .

Form methods are available under its object.

Learn more about each method under .

React Advanced Form is field-centric. That means that you may want to configure a set of as the first step of integrating this solution into your application.

You can use to specify application-wide validation rules and messages, or you can pass them to a specific Form using and props respectively.

Form callbacks
Form methods
composite field components
FormProvider
rules
messages
ValidationRules
innerRef
action
rules
messages
ValidationMessages
validate
serialize
reset
submit
reference