Generate form from validation schema?

[PizzaConsole]

Figured I would throw this in here while is fresh on the mind. Not something that has to be added to the core. But I think it would be really cool to be able to pass along a validation schema (like zod) and use that to completely generate a form. I plan on looking into it over the next couple of weeks.

[mateenagy]

I think it can work as a modular package like the different schema validators. Maybe I will look into this in the future but now I focused on polishing and focus on the type safety part, but in the meantime I will think about it.

[mateenagy]

@PizzaConsole I looked into this and I don't think generate form from validation schema is a good way.

The main problem with this approach is these validators are strongly typed so you can't add custom attributes to their object value. To hack it around just take too much time, especially if you want to implement different validators.

I think a better approach using validators as it used now and use it for typing like the useForm. My idea looking like this:

I made a component called SchemaField which takes a schema array as prop. In the background this will generate the fields.

The schema will look like this:

type LoginRequest = {
  username: string;
  nested: {
    foo: string;
  }
}

const jsonSchema: JSONSchema<LoginRequest> = [
  {
    name: 'username',
    component: Field,
  },
  {
    name: 'nested.foo',
    component: Field,
    attrs: {
      default: 'Hello World!'
    }
  },
];

In template:

<SchemaField :schema="jsonSchema">

Beside this approach is working just fine there comes some difficulty because of the headless approach of this library. Most of the time you will have to make custom components to use it in real life scenario because you don't have that much freedom with json schema to add different elements before/above/next to the element.

I think it can work with complex use case but you have to do some work with the components the schema will use.

[PizzaConsole]

@mateenagy An example of what I am thinking

https://github.com/thepeaklab/zod-form-renderer?tab=readme-ov-file#creating-a-field-renderer

[mateenagy]

This already can achieved with this library, beside the named component based on the validation field. But otherwise I don't see any special step in that library which can't be done with the current setup. You can use zod or the other supported validators infer types for type safety and autocompletion.

I'm also not a big fan of this named component by validator key thing. For a complex form it can be confusing. I like generic naming little bit more.