Вложенная форма диалога также подчиняет родительскую форму ⇐ Html

[Anonymous]

Учитывая форму с использованием формы React Hook, MUI и ZOD. Объект формы содержит поле, которое представляет собой массив объектов, и пользователь может добавить/удалить/редактировать элементы списка. Собственная форма (полученная из схемы родительской формы) и при отправке этого диалога она изменяет фактические данные родительской формы. .

Playground: https://stackblitz.com/edit/vitejs-vite ... %2fapp.tsx Значения по умолчанию Установите форму в действительное состояние. Попробуйте открыть диалог «Добавить» и попытаться отправить этот диалог с неверным состоянием. в родительскую форму. < /p>

import { zodResolver } from '@hookform/resolvers/zod';
import {
Button,
TextField,
Container,
Alert,
AlertTitle,
Dialog,
DialogContent,
DialogActions,
} from '@mui/material';
import { Dispatch, SetStateAction, useState } from 'react';
import { type SubmitHandler, useForm, useFieldArray } from 'react-hook-form';
import { z } from 'zod';

const parentFormFieldsSchema = z.object({
foo: z.string().min(1),
bars: z
.array(
z.object({
title: z.string().min(1),
})
)
.min(1),
});

function App() {
const [isAddDialogOpen, setIsAddDialogOpen] = useState(false);

const {
register,
handleSubmit,
formState: { errors },
control,
} = useForm({
resolver: zodResolver(parentFormFieldsSchema),
defaultValues: {
foo: 'foo',
bars: [{ title: 'bar-1' }],
},
});

const { fields: barFields, append: appendBar } = useFieldArray({
control,
name: 'bars',
keyName: 'fieldID',
});

const onSubmit: SubmitHandler = (
data
) => alert('parent form submit');

return (



setIsAddDialogOpen(true)}>Add bar
appendBar(newBar)}
/>

Bars:
{barFields.map((barField) => (

Title: {barField.title}

))}
{errors.bars && (

Invalid bars
{errors.bars?.message ?? ''}

)}
Submit Parent form

);
}

interface AddBarDialogProps {
isDialogOpen: boolean;
setIsDialogOpen: Dispatch;
onBarAdded: (
bar: z.infer
) => void;
}

function AddBarDialog({
isDialogOpen,
setIsDialogOpen,
onBarAdded,
}: AddBarDialogProps) {
const childFormFieldsSchema = parentFormFieldsSchema.shape.bars.element;

const {
register,
handleSubmit,
formState: { errors },
} = useForm({
resolver: zodResolver(childFormFieldsSchema),
defaultValues: {
title: '',
},
});

const onSubmit: SubmitHandler = (
data
) => {
onBarAdded(data);
setIsDialogOpen(false);
};

return (
setIsDialogOpen(false)}
PaperProps={{
component: 'div',
}}
>





Submit Child form



);
}
< /code>
Я подумал, что смогу решить его, изменив диалог отправить обработчик на < /p>
const onSubmit: SubmitHandler = (data, event) => {
event?.preventDefault(); // Prevent default form submission
event?.stopPropagation(); // Stop event from bubbling up
onBarAdded(data);
setIsDialogOpen(false);
};
< /code>
Но это не исправлено. Есть идеи?

Подробнее здесь: https://stackoverflow.com/questions/794 ... arent-form