Add `setSchema()` to support dynamic schemas

[jith51]

Motivation

It would be very useful for Formisch to provide a way to dynamically replace the schema of an existing FormStore.

This is especially important for forms representing objects whose validation rules depend on external data or whose fields are dynamically defined.

For example, a form may contain custom attributes whose definition comes from a parent object:

{
  name: string,
  customAttributesDefinition: [
    {
      name: string,
      label: string,
      type: string
    }
  ]
}

The validation schema may therefore need to change when the parent object changes.

Current limitation

Currently, the schema is provided when the form is created:

const form = useForm({
  schema,
})

If the schema needs to change later, there does not appear to be a way to update it on an existing FormStore.

Using reset() does not solve this problem because it resets the form state and input, but does not replace the schema.

A workaround in Vue is to recreate the form/component, for example using a changing :key, but this also recreates the entire FormStore and is not ideal.

Proposed API

Add a setSchema() method:

setSchema(form, newSchema)

For example:

const schema = createSchema(parentAttributes)

setSchema(form, schema)

The method would replace the schema associated with the existing FormStore.

Expected behavior

When setSchema() is called, Formisch should:

1. Replace the current schema with the new schema.
2. Keep the existing form input and values.
3. Keep the existing FormStore instance.
4. Update the field validation structure according to the new schema.
5. Revalidate fields according to the configured validation strategy.
6. Update isValid and the associated errors accordingly.

For example:

const form = useForm({
  schema: initialSchema,
  validate: 'blur',
  revalidate: 'input',
})

// External data changes

const newSchema = createSchema(newParentAttributes)

setSchema(form, newSchema)

The form would then continue using the same FormStore, but with the new validation rules.

[fabian-hiller]

Thank you for creating this issue. I am not sure how we can make a setSchema API typesafe. Formisch is typesafe because the form is created from the schema and knows about it.

I wonder if the issue can be solved by either creating multiple forms and render the form based on the external value or use a v.variant(…) schema and set the discriminator key whenever the external value changes.

[jith51]

Thanks. Here is a more concrete description of my use case.

My application manages Chassis References and Chassis Powertypes.

A Chassis Reference can be associated with a Powertype. Each Powertype can have its own set of custom fields.

The important part is that these custom fields are created and configured by the users themselves.

For example, a user can create a Powertype called 1U Server and define:

1U Server

Custom fields:
  - manufacturer     (text)
  - serial_number    (text)
  - rack_units       (number)

Another user can create a completely different Powertype:

Storage Server

Custom fields:
  - manufacturer     (text)
  - disk_count       (number)
  - raid_type        (text)
  - has_nvme         (boolean)
  - installation_date (date)

There is no fixed list of possible fields in the application.

Users can create new Powertypes and new custom fields at any time, so I cannot define all possible variants in advance in a TypeScript/Valibot schema.

When creating or editing a Chassis Reference, the user selects a Powertype.

Once the Powertype is selected, its custom field definitions are loaded from the server.

The form therefore needs to dynamically adapt to the selected Powertype:

User selects Powertype
        ↓
Load Powertype definition
        ↓
Load user-defined custom fields
        ↓
Build the corresponding validation schema
        ↓
Update the existing form

For example, if the user selects Storage Server, the form needs to dynamically add:

manufacturer
disk_count
raid_type
has_nvme
installation_date

and validate them according to their user-defined types.

The difficulty is that these fields are not known when the application is developed. They are configuration/data created by users.

Conceptually, I would like to do something like:

const newSchema = createSchemaFromPowertype(
  selectedPowertype
)

form.setSchema(newSchema)

without recreating the existing FormStore.

The expected behavior would be:

1. The user selects a Powertype.
2. The application loads its user-defined custom field definitions.
3. A new validation schema is generated from those definitions.
4. The existing FormStore is updated with this schema.
5. The current form values are preserved where possible.
6. The new fields become part of the form.
7. The form is revalidated using the new schema.
8. Errors and isValid are updated.
9. Existing field components continue using the same FormStore instance.

This is why I don't think I can solve the problem by defining a TypeScript union of all possible schemas: the possible schemas are not known in advance because the fields themselves are created by the users.

I could recreate the form whenever the Powertype changes, but this would mean replacing the existing FormStore and all the field state/subscriptions associated with it.

What I am looking for is therefore an API that allows the validation schema of an existing form to be replaced dynamically, for example:

form.setSchema(newSchema)

or an equivalent API such as:

setSchema(form, newSchema)

If Formisch already has a recommended pattern for this kind of user-defined/dynamic schema, I'd be happy to use it.