FormTemplate

FormTemplate component allows you to fully customize the form layout. FormTemplate receives only two props from renderer: formFields and schema.

node

Fields of the form.

object

Schema from renderer. You can use it to extract a form title, description or whatever you need.

Minimal FormTemplate could look like this:

const FormTemplate = ({schema, formFields}) => {
  const { handleSubmit } = useFormApi();

  return (
    <form onSubmit={handleSubmit}>
      { schema.title }
      { formFields }
      <button type="submit">Submit</button>
    </form>
  )
}

With using useFormApi hook you can get access to all form information and functions you need. For example, you can use it to display form errors wherever you want to.

FormTemplates of the provided DDF mappers offers additional customization via using props.

import FormTemplate from '@data-driven-forms/pf4-component-mapper/form-template';

<FormRenderer
  ...
  FormTemplate={(props) => <FormTemplate {props} showFormControls={false} ... />}
/>

object

Props passed to FormError alert component.

string

Class which will be given to the buttons wrapper.

string[]

You can specify the order of the form buttons.

Example

[ 'submit', 'reset', 'cancel' ]

object

Props passed to an element wrapping all buttons.

object

Props passed to buttons. Please follow this structure: { submit: submitButtonProps, cancel: cancelButtonProps, reset: resetButtonProps }.

node = 'Cancel'

Label for cancel button.

boolean

Shows/hides the reset button.

string[]

You can specify a form attributes (see here) which will make the submit button disabled when true.

object

Props passed to a form wrapper.

object

Props passed to a header element.

node = 'Reset'

Label for reset button.

boolean = true

You can disable showing form buttons. Use it with wizard component which has its own buttons.

node = 'Submit'

Label for submit button.

object

Props passed to a title element.

Custom form buttons

Form level errors