Form validation errors not visible in DOM

[Deepakeon]

Describe the bug

const form1validatorObj = z.object({
		field1: z.string().min(100, {message: "form 1 error"})
	})

	const form2validatorObj = z.object({
		field2: z.string().min(100, {message: "form 2 error"})
	})
	const {
		form: form1,
		errors: errors1
	} = createForm({
		extend: reporter({ single: true }),
		validate: (values) => {
			return validateSchema(form1validatorObj)(values);
		}
	});

	const {
		form: form2,
		errors: errors2
	} = createForm({
		extend: reporter({ single: true }),
		validate: (values) => {
			return validateSchema(form2validatorObj)(values);
		}
	});	
	$: console.log($errors1, $errors2)

<form use:form1>
	field 1
	<input type="text" name="field1">
	<div
		id="field1-validation"
		data-felte-reporter-dom-for="field1"
		aria-live="polite"
	/>
	<form use:form2>
		field 2
		<input type="text" name="field1">
		<div
			id="field2-validation"
			data-felte-reporter-dom-for="field2"
			aria-live="polite"
		/>
	</form>
</form>

i am trying to use one form inside of another form but when i have errors in form 2 they are not shown in the dom

Which package/s are you using?

felte (Svelte), @felte/validator-zod, @felte/reporter-dom

Environment

• OS: Windows 11
• Browser: Edge
• Version: @felte/reporter-dom: ^1.1.5 @felte/validator-zod: ^1.0.13 felte: ^1.2.7

Additional context

i have a svelte form, inside of which i am calling another svelte form

[Deepakeon]

one workaround for this is to use @felte/reporter-svelte package