Dynamic form issue

[joeczucha]

I've been following along with this guide attempting to build a form that can be generated from a JSON payload.

I've built a prototype which adds a field to an array and then attempts to apply pre-defined validation (via a Yup schema).

However, the validation on this field doesn't seem to load correctly. Am I doing something silly?

https://stackblitz.com/edit/vitejs-vite-rxtj1s?file=src/App.vue

[logaretm]

The nested inputs you've provided inside the Field components are causing this. The Field component already renders a input field so you don't have to do this.

https://stackblitz.com/edit/vitejs-vite-hw79cv?file=src%2FApp.vue

Providing a nested input is for complicated markup, and you would need to hook up the value/event bindings yourself then. The correct way to do it is like this:

<Field name="field" v-slot="{ field }">
 <input v-bind="field" />
</Field>