\n \u003C/UFormGroup>\n \u003CUFormGroup label=\"Training Week\" name=\"trainingWeek\">\n \u003Cdiv v-for=\"(day, index) in state.trainingWeek\" :key=\"index\">\n \u003CUFormGroup label=\"Day\" name=\"trainingWeek[' + index + '].day\">\n \u003CUInput v-model=\"day.day\" />\n \u003C/UFormGroup>\n \u003CUFormGroup label=\"Exercises\" name=\"trainingWeek[' + index + '].exercises\">\n \u003Cdiv v-for=\"(exercise, exerciseIndex) in day.exercises\" :key=\"exerciseIndex\">\n \u003CUInput v-model=\"exercise.exerciseName\" />\n \u003C/div>\n \u003C/UFormGroup>\n \u003Cdiv class=\"mt-4 flex justify-end\">\n \u003CUButton @click=\"addExercise(index)\">Add Exercise\u003C/UButton>\n \u003C/div>\n \u003C/div>\n \u003C/UFormGroup>\n \u003Cdiv class=\"mt-4 flex justify-end\">\n \u003CUButton @click=\"addDay\">Add Day\u003C/UButton>\n \u003CUButton type=\"submit\">Submit\u003C/UButton>\n \u003C/div>\n \u003C/UForm>\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\nimport { z } from \"zod\";\nimport type { FormSubmitEvent } from \"#ui/types\";\nconst state = reactive({\n name: \"\",\n trainingWeek: [\n {\n day: \"\",\n exercises: [\n {\n exerciseName: \"\",\n },\n ],\n },\n ],\n});\n\nconst schema = z.object({\n name: z.string().min(1, \"Required field\"),\n trainingWeek: z.array(\n z.object({\n day: z.string().min(1, \"Required field\"),\n exercises: z.array(\n z.object({\n exerciseName: z.string().min(1, \"Required field\"),\n }),\n ),\n }),\n ),\n});\n\ntype Schema = z.infer\u003Ctypeof schema>;\n\nconst handleSubmit = (event: FormSubmitEvent\u003CSchema>) => {\n console.log(JSON.stringify(event.data, null, 2));\n};\n\nconst addExercise = (index: number) => {\n state.trainingWeek[index].exercises.push({ exerciseName: \"\" });\n};\n\nconst addDay = () => {\n state.trainingWeek.push({ day: \"\", exercises: [{ exerciseName: \"\" }] });\n};\n\u003C/script>\n\n```\n\nI render the form based on state and dynamically add fields.\n\nThe form automatically sets up errors for name ( or any first level fields ) but doesn't set up errors for nested ones like day or exerciseName in the above example\n\nWhat's the proper way to create dynamic forms and avail error setting ? \n\nI'm able to get the following:\n```json\nprofile.vue:68 ZodError: [\n {\n \"code\": \"too_small\",\n \"minimum\": 1,\n \"type\": \"string\",\n \"inclusive\": true,\n \"exact\": false,\n \"message\": \"Required field\",\n \"path\": [\n \"trainingWeek\",\n 0,\n \"day\"\n ]\n },\n {\n \"code\": \"too_small\",\n \"minimum\": 1,\n \"type\": \"string\",\n \"inclusive\": true,\n \"exact\": false,\n \"message\": \"Required field\",\n \"path\": [\n \"trainingWeek\",\n 0,\n \"exercises\",\n 0,\n \"exerciseName\"\n ]\n }\n]\n```\noutput by parsing schema \n```js\nwatchEffect(() => {\n try {\n schema.parse(state);\n } catch (error) {\n console.error(error);\n }\n});\n```\n\n",[3217],{"name":3218,"color":3219},"question","d876e3",2674,"How to ensure UForm and UFormGroup auto assigns errors for nested dynamic form.","2024-11-18T16:59:59Z","https://github.com/nuxt/ui/issues/2674",0.70645297,{"labels":3226,"number":3232,"owner":3141,"repository":3141,"state":3182,"title":3233,"updated_at":3234,"url":3235,"score":3236},[3227,3229],{"name":3207,"color":3228},"8DEF37",{"name":3230,"color":3231},"2.x","d4c5f9",6699,"Add client option to not replace current page component with \u003CNuxtError> component when there's an uncaught error","2023-02-14T11:37:17Z","https://github.com/nuxt/nuxt/issues/6699",0.7220513,{"labels":3238,"number":3242,"owner":3141,"repository":3141,"state":3182,"title":3243,"updated_at":3244,"url":3245,"score":3246},[3239,3240,3241],{"name":3179,"color":3158},{"name":3138,"color":3139},{"name":3230,"color":3231},7743,"when using $nuxt.error from client side, error page will not respect layout ","2023-01-22T15:36:04Z","https://github.com/nuxt/nuxt/issues/7743",0.7288786,{"description":3248,"labels":3249,"number":3257,"owner":3141,"repository":3141,"state":3182,"title":3258,"updated_at":3259,"url":3260,"score":3261},"### Environment\n\nNuxt project info: 15:46:56\r\n\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v16.14.2\r\n- Nuxt Version: 3.5.2\r\n- Nitro Version: 2.4.1\r\n- Package Manager: npm@7.17.0\r\n- Builder: vite\r\n- User Config: -\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\n\n### Reproduction\n\n[reproduction](https://stackblitz.com/github/jbreuil/layout-repro)\r\n\r\nIn this reproduction, the error is triggered when the layout is changed on routing. The error start appearing when adding a ref element in the component. The ref is on a v-for following the [documentation syntax](https://vuejs.org/guide/essentials/template-refs.html#refs-inside-v-for) and [typing](https://vuejs.org/guide/typescript/composition-api.html#typing-template-refs)\n\n### Describe the bug\n\nRelated to #13309, where people have the same error when using Transition.\r\n\r\nHere the error is the same and triggered at the same time (change of layout on routing to another page). In this reproduction, the error is appearing once we add a ref in the v-for of the component.\r\n\r\nFixed if you downgrade to nuxt 3.3.3\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3250,3253,3254],{"name":3251,"color":3252},"3.x","29bc7f",{"name":3138,"color":3139},{"name":3255,"color":3256},"upstream","E8A36D",21323,"Layout error when using an Element ref on v-for","2023-07-06T15:39:03Z","https://github.com/nuxt/nuxt/issues/21323",0.7297862,["Reactive",3263],{},["Set"],["ShallowReactive",3266],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f7vMbrVTIL25ymBQt8CKV-FUViuSLmguNo0pfFmJC3VQ":-1},"/nuxt/ui/2599"]