Prepop Values Without Specifying Groups

Describe the feature

From what I can tell, in order to pre-populate input values when using groups you need to specify the name of the group node and then nest the input values under that. For example, let’s say I had a group called dateAndZip which had two input nodes named date and zip_code within it. In order to prepop values it seems I need to do the following (using schema in this example):

const schema = [
  {
    $cmp: 'FormKit',
    props: {
      type: 'form',
      id: 'form',
      value: {
        dateAndZip: {
          zip_code: "12345",
          date: "2022-05-01"
        }
      }
    },

Since all node names need to be unique as far as I can tell (since they get entered into a global registry), shouldn’t it be possible to prepop without specifying the group name? The groups, at least in my case of a multi-step form, are purely organizational with somewhat arbitrary names, and the position of the inputs may shift to other groups over time. On top of that if I want to share a form I don’t really want the consumer to have to get tied to my group naming just to prepop values. Then any change in input position to a different group/step, or any change in group name would break the front end code unnecessarily, as well as making things like prepop-ing from URL values more cumbersome – i.e requiring something like &dateAndZip.zip_code=12345 or passing JSON structures in a URL param value which is even more painful.

I suppose I may be able to work around this with a plugin that handles a flat value structure, or passing and using a custom prop altogether, but it would be nice to be built in. Thanks for hearing me out!

[justin-schroeder]

A few things I wanted to clarify on this:

Since all node names need to be unique as far as I can tell (since they get entered into a global registry), shouldn’t it be possible to prepop without specifying the group name?

Node names are not entered into a global registry, and do not need to be globally unique (only unique within their given object-depth). Only nodes with an explicitly defined id are entered into the global registry. I’m betting you knew this and just slipped on the semantics, but in case that was unclear its worth pointing out 👍

I suppose I may be able to work around this with a plugin that handles a flat value structure, or passing and using a custom prop altogether, but it would be nice to be built in. Thanks for hearing me out!

This is a valid limitation that @GustavoFenilli has brought up before. It can be frustrating for pre-pop and submission. The solution would be to add a 4th type of node (currently: list, group, input) — perhaps something like provider that operates as a group, but forwards all values to the parent without contributing its own wrapper. This is technically possible, and probably worth putting on the roadmap, but it does require modifying FormKit core substantially and it raises almost as many questions as it answers. Like, what is the node.value of this node? Not saying we cannot answer those questions, but it would need to be a careful and considered process.

I think a more reasonable (short term) approach is to create plugins and helpers to accomplish the desired outcomes, like a step component, and other helper components or functions.

[totalhack]

Here is an experimental prepop plugin that can optionally pull data from the URL search params or a prepop object exposed on the data available to the schema. There is an example of the latter in the dev App for the FormKitMultiStep component. It works off of node.name so it does “flat” substitution instead of having to namespace to the group.

Disclaimers: only lightly tested on schema-based forms, the whole project is experimental, and javascript is not my primary language. Use with caution.