Original Features

• Form config object for customization
• ZenstackUpdateForm and ZenstackCreateForm
• Automatically calls correct create/update hook with form validation
• Input fields receive error prop
• Adds “dirty” class when a field has been edited and not yet saved. In the demo, this is utilized to animate a green indicator icon for fields that have been edited
• Customization Overrides
  • Clone the metadata object, make changes, and pass it in to your form
  • schemaOverride (custom zod schema), metadataOverride (custom metadata object), submitOverride (custom actions on create/update)
• Decorated templates with slots and custom elements
  • Use data-field-name to use a custom element in the form. The ZenstackForm component will automatically pass and update form values to that field
  • Use data-placeholder-name with an empty div to control where an element goes. The ZenstackForm component will automatically replace it with the corresponding form element. This allows you to create custom form templates and make completely customized forms
• Global value/label transform functions (ex: replace underscores for all enum values with a space for display labels)
• Better typing when customizing the metadata object
• New metadata fields
  • label, placeholder, hidden
  • displayFieldForReferencePicker - The field of the reference model to display in the reference picker
  • dependsOn - a list of fields that will be disabled until the fields in the array have values
  • filter - filter based on the current form values and the reference field values
• Automatic pagination or infinite scroll

Upcoming Features

Form Features

• All field types support (ex: dates, arrays, json, etc.)
• Slots in react - Create your own UI as children under a form component. Assigning an id to a slot element will replace it with the correct input element
• Customize keyboard shortcuts for submission/saving
• Update form modes - save instantly (or use debouncing), or save on button click/shortcut