diff --git a/concepts/05 UI Components/Form/01 Getting Started with Form/80 Submit the Form.md b/concepts/05 UI Components/Form/01 Getting Started with Form/80 Submit the Form.md index 1eaf2f5365..74c15e2fe8 100644 --- a/concepts/05 UI Components/Form/01 Getting Started with Form/80 Submit the Form.md +++ b/concepts/05 UI Components/Form/01 Getting Started with Form/80 Submit the Form.md @@ -403,6 +403,73 @@ Alternatively, if you want to implement custom validation logic, handle the Butt export default App; +[note] + +React 19 offers a [useActionState](https://react.dev/reference/react/useActionState) hook that allows you to update the state based on a form action result. When using this hook, [clear](/Documentation/ApiReference/UI_Components/dxForm/Methods/#clear) the Form as the initial step when you implement an action: + + + import React, { useActionState, useRef } from "react"; + import "devextreme/dist/css/dx.light.css"; + + import { + Form, + SimpleItem, + GroupItem, + ButtonItem, + NumericRule, + EmailRule, + } from "devextreme-react/form"; + + const employee = { + // ... + }; + + const submitButtonOptions = { + text: "Submit the form", + useSubmitBehavior: true, + }; + + export default function App() { + const form = useRef(null); + + const [error, submitAction, isPending] = useActionState( + async (previousState, formData) => { + form?.current?.instance?.().clear?.(); // Clear the form + await new Promise((resolve) => + // Resolve the promise + ); + if ( ... ) { // Configure when to return an error + return new Error("Submitting failed!"); + } + const fieldValues = Object.fromEntries(formData); + return fieldValues; + }, + null + ); + + return ( +
+ + ); + } + +[/note] + --- For more information on the Form UI component, refer to the following resources: