Tpk Form

A comprehensive form component that integrates validation using ember-immer-changeset and zod.

Examples

Basic usage

Available Yielded Components

The TpkForm component yields numerous pre-configured components, all automatically bound with the changeset, disabled state, and required fields.

Base Components (for custom layouts)

  • F.TpkInput - Base input component
  • F.TpkTextarea - Base textarea component
  • F.TpkSelect - Base select component
  • F.TpkCheckbox - Base checkbox component
  • F.TpkRadio - Base radio component
  • F.TpkRadioGroup - Radio group component
  • F.TpkFile - Base file input component
  • F.TpkDatepicker - Base datepicker component

Prefab Components (ready-to-use)

  • F.TpkInputPrefab - Standard text input
  • F.TpkTextareaPrefab - Textarea with validation
  • F.TpkSelectPrefab - Select dropdown
  • F.TpkSelectCreatePrefab - Select with create option
  • F.TpkSelectSearchPrefab - Searchable select
  • F.TpkCheckboxPrefab - Checkbox with label
  • F.TpkRadioPrefab - Single radio button
  • F.TpkRadioGroupPrefab - Radio button group
  • F.TpkFilePrefab - File upload input

Specialized Input Prefabs

  • F.TpkPasswordPrefab - Password input with visibility toggle
  • F.TpkEmailPrefab - Email input with validation
  • F.TpkMobilePrefab - Mobile phone number input
  • F.TpkIbanPrefab - IBAN (bank account) input
  • F.TpkBicPrefab - BIC/SWIFT code input
  • F.TpkVatPrefab - VAT number input
  • F.TpkNationalNumberPrefab - National identification number
  • F.TpkCurrencyPrefab - Currency/money input
  • F.TpkIntegerPrefab - Integer number input
  • F.TpkNumberPrefab - Decimal number input

Date/Time Prefabs

  • F.TpkDatepickerPrefab - Single date picker
  • F.TpkDatepickerRangePrefab - Date range picker
  • F.TpkTimepickerPrefab - Time picker

Yielded Helper Values

  • F.changesetGet - Function to retrieve values from the changeset (shortcut for changeset.get())
  • F.requiredFields - Array of field names that are required according to the validation schema

Using Base Components for Custom Layouts

Base components give you full control over the markup.

Basic usage

Validation Behavior

Reactive Validation (Default)

When reactive is true by default, fields are validated as soon as their values change.

Basic usage

Submit-Only Validation

Set reactive at false to validate only when the form is submitted.

Basic usage

Error Handling and Auto-Scrolling

Control error clearing and auto-scroll behavior with @removeErrorsOnSubmit and @autoScrollOnError properties.

Basic usage

Disabled State

Disable the entire form and all its inputs by setting @disabled={true}.

Basic usage

Working with Required Fields

Access the list of required fields from the validation schema using the yielded F.requiredFields array.

Basic usage

Required fields: 2

Email is required

changesetGet Helper

Use the changesetGet helper to retrieve values without repeating the @changeset argument.

Basic usage

Full name:

Properties

Name Type Required Description
@changeset ImmerChangeset Yes An ImmerChangeset instance holding form state and validation errors.
@onSubmit Function Yes Callback called with validated data and the changeset after successful validation.
@validationSchema ZodObject Yes A Zod object schema used to validate the changeset on submit.
@reactive Boolean No When true, validates individual fields on change instead of waiting for submit.
@removeErrorsOnSubmit Boolean No When true, clears all errors before running validation on submit.
@autoScrollOnError Boolean No When true, scrolls to the first field with an error after failed validation.
@disabled Boolean No When true, disables all yielded input components.
@executeOnValid Boolean No When true, calls onSubmit only if all fields pass validation.
EMBER COMMON UI

EMBER COMMON UI

  • Theme