DynamicForm.Renderer (DynamicForm v0.21.0)

A pure functional component that renders dynamic forms using SurveyJS-compatible format.

This component renders the form HTML based on a DynamicForm.Instance configuration. Use this for advanced cases where you want custom state management.

Example

<DynamicForm.Renderer.render
  instance={@form_instance}
  form={@form}
  submit_text="Submit Form"
  phx_submit="submit"
  phx_change="validate"
  form_id="my-dynamic-form"
/>

External Submit Button

You can place a submit button outside the form element by:

Setting hide_submit to true
Using DynamicForm.submit_button/1 anywhere on the page with the form's ID

Example

# Form without submit button
<DynamicForm.Renderer.render
  instance={@form_instance}
  form={@form}
  form_id="my-form"
  hide_submit={true}
  phx_submit="submit"
/>

# Submit button elsewhere on the page
<div class="sticky bottom-0">
  <DynamicForm.submit_button form="my-form">
    Save Changes
  </DynamicForm.submit_button>
</div>

Summary

Functions

render(assigns)

Functions

render(assigns)

Attributes

instance (:any) (required) - The form instance configuration. Can be an Instance struct, JSON string, or map that will be decoded into an Instance.
form (Phoenix.HTML.Form) (required) - The Phoenix form struct.
submit_text (:string) - Text for the submit button. Defaults to nil.
phx_submit (:string) - Phoenix event name for form submission. Defaults to "submit".
phx_change (:string) - Phoenix event name for form validation. Defaults to "validate".
target (:any) - Phoenix LiveView target for events. Defaults to nil.
form_id (:string) - HTML ID for the form element. Defaults to "dynamic-form".
disabled (:boolean) - Whether the form is disabled. Defaults to false.
hide_submit (:boolean) - Whether to hide the submit button (useful when using an external submit button). Defaults to false.
gettext (:atom) - Gettext backend module for translations. Defaults to DynamicForm.Gettext.
uploads (:map) - Upload configurations for file fields. Defaults to %{}.
parent_id (:string) - Parent component ID for LiveComponent communication. Defaults to nil.
components (:atom) - Custom components module (e.g. the app's Phoenix-generated CoreComponents); functions it exports override the built-ins per function — see DynamicForm.Components. Defaults to nil.
custom_field_types (:map) - Custom field types map (type name => Ecto type), merged over the :dynamic_form, :custom_field_types config — see DynamicForm.FieldTypes. Defaults to nil.