Form Renderer

Form renderer is the core component of Data Driven Forms. It is used to generate and render forms.

import FormRenderer from '@data-driven-forms/react-form-renderer/form-renderer';

const App = () => (<FormRenderer
  onSubmit={onSubmit}
  schema={schema}
  componentMapper={componentMapper}
  FormTemplate={FormTemplate}
/>)

object

Defines types of form field components. Field components can change the state of the form.

You can use globally defined attributes.

Read more.

Component

Note You have to pass at least one of FormTemplate or a children render function to render the fields.

A component that defines a template of the form. This component receives two props from the renderer: formFields and schema. formFields is the content of the form. You should wrap this content into your <form> component and add form buttons.

Read more.

Note You have to pass at least one of FormTemplate or a children render function to render the fields.

function

Children render function. It serves the same purpose as FormTemplate prop. Read more.

(values, formApi) => void

A submit callback which receives two arguments: values and formApi.

Read more.

object

A schema which defines structure of the form. Consists of fields.

Example

schema = {
  title: 'Your name', // you can extract this in formTemplate
  description: 'Add your name', // you can extract this in formTemplate
  fields: [{
    name: 'userName',
    label: 'Your name is',
    component: componentTypes.TEXT_FIELD,
  }]
};

object

Action mapper allows to map functions as props.

Read more.

boolean

Will clear values of unmounted components. You can also set this to specific component in the form schema.

Read more.

any

Value that will be set to field with initialValue after deleting it. Useful for forms while editing.

Read more.

func

A reset callback that refresh the form state to the initial state.

(values) => void

A cancel callback, which receives values as the first argument.

(formState) => void

A function which will be called with every form update, i.e. ({ values }) => setValues(values).

Read more

object

An object of fields names as keys and values as their values.

Example

initialValues={{ name: 'initial-name', nested: { value: 'neste-value' }}}

object

Schema validators mapper. You can control schemas of your components, validators and actions.

Read more.

object

You can pass your own subscription, which will be added to default settings.

Default subscription

{ pristine: true, submitting: true, valid: true }

(values) => void | Errors

A function which receives all form values and returns an object with errors.

Read more.

object

A mapper containing custom validators, it's automatically merged with the default one.

Read more.