I'm looking for a usable pattern for putting a <Form> in a <Dialog>. the Submit button should be in the <DialogActionsBar> but I'm not sure how to get the Form's `valid` state outside the form...
Ideally you could do:
<Dialog>
<Form render={({valid}) => {
return (
<FormElement>
... some form inputs here ...
<DialogActionButtons>
<Button type="submit" disabled={valid}>Submit</button>
</DialogActionButtons>
</FormElement>
);
}}
/>
</Dialog>
But of course that dos not work because the <DialogActionButtons> ends up being at the wrong place in the DOMso the styling doesn't work right.
-----
You can get the submit button working correctly by using the standard HTML `form` attribute on the `button` like this:
<Dialog>
<Form render={({valid}) => {
return (
<FormElement id="formId">
... some form inputs here ...
</FormElement>
);
}}
/>
<DialogActionButtons>
<Button type="submit" form="formId" disabled={???}>Submit</button>
</DialogActionButtons>
</Dialog>
But now there is no way to get the `valid` form prop out to the Button's disabled prop.
-----
You may think to do:
const [formValid, setFormValid] = React.useState(false);
<Dialog>
<Form render={({valid}) => {
setFormValid(valid);
return (
<FormElement id="formId">
... some form inputs here ...
</FormElement>
);
}}
/>
<DialogActionButtons>
<Button type="submit" form="formId" disabled={formValid}>Submit</button>
</DialogActionButtons>
</Dialog>
but this is technically not valid and will produce a warning/error from React:
""
Is there a known pattern for making this work
1 Answer, 1 is accepted
Hello Jeff,
Due to the way that the Dialog component will render the DialogActionsBar, we would recommend that you move the Submit button directly in the Form component and do not use the DialogActionsBar. You can use the following example as a reference:
Hope this helps.
Regards,
Konstantin Dikov
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.