Verschachtelte Dialogformular reicht auch übergeordnetes Formular ein ⇐ HTML

[Anonymous]

eine Form mit React -Hook -Form, MUI und ZOD gegeben. Das Formularobjekt enthält ein Feld, das ein Array von Objekten ist und der Benutzer die Listenelemente hinzufügen/entfernen/bearbeiten kann. eigenes Formular (abgeleitet aus dem übergeordneten Formularschema) und beim Übermitteln dieses Dialogs die tatsächlichen Daten der übergeordneten Formularformulare. . Br /> Die Standardwerte setzen das Formular in einen gültigen Zustand. Versuchen Sie, den Dialogfeld "Hinzufügen" hinzufügen und diesen Dialog mit einem ungültigen Status einzureichen. < /P>
Sie sollten sehen zum übergeordneten Formular. < /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>
Ich dachte, ich könnte es lösen, indem ich den Dialog zu ändere, um Handler zu senden in < /p>
const onSubmit: SubmitHandler = (data, event) => {
event?.preventDefault(); // Prevent default form submission
event?.stopPropagation(); // Stop event from bubbling up
onBarAdded(data);
setIsDialogOpen(false);
};
< /code>
Aber das hat es nicht behoben. Irgendwelche Ideen?