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/dist/cjs/form-renderer';const App = () => (<FormRendereronSubmit={onSubmit}schema={schema}componentMapper={componentMapper}FormTemplate={FormTemplate}/>)
Prop | Type | Description |
---|---|---|
componentMapper | object | Defines types of form field components. Field components can change the state of the form. |
FormTemplate | Component | Components which 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. |
onSubmit | func | A submit callback which receives two arguments: values and formApi . |
schema | object | A schema which defines structure of the form. |
Prop | Type | Description | Default |
---|---|---|---|
actionMapper | object | Action mapper allows to map props to functions. | |
clearOnUnmount | bool | Will clear values of unmounted components. You can also set this to specific component in the form schema. | false |
clearedValue | any | Value that will be set to field with initialValue after deleting it. Useful for forms while editing. | undefined |
onReset | func | A reset callback. You don't need to manually clear the form values! | |
onCancel | func | A cancel callback, which receives values as the first argument. | |
debug | func | A function which will be called with every form update, i.e. ({ values }) => setValues(values) , please take a look here | |
initialValues | object | An object of fields names as keys and values as their values. | |
schemaValidatorMapper | object | Schema validators mapper. You can control schemas of your components, validators and actions. | |
subscription | object | You can pass your own subscription, which will be added to default settings. | { pristine: true, submitting: true, valid: true } |
validate | func | A function which receives all form values and returns an object with errors. | |
validatorMapper | object | A mapper containing custom validators, it's automatically merged with the default one. |
The root object of the schema represents the Form component. Please read more here.
schema = {title: 'Your name', // you can extract this in formTemplatedescription: 'Add your name', // you can extract this in formTemplatefields: [{name: 'userName',label: 'Your name is',component: componentTypes.TEXT_FIELD,}]};