Save button click but no trigger action

I have this part of component

import React, { useCallback } from "react";
import { useTranslate, useShow, IResourceComponentsProps } from "@refinedev/core";
import { useForm } from "@refinedev/antd";
import { Form, Input, notification } from "antd";
import { Edit, InputMap, EmptyHeadersButtons } from "components";

export const LocationGroupEdit: React.FC<IResourceComponentsProps> = () => {
    const translate = useTranslate();
    const { queryResult } = useShow();
    const { data, isLoading } = queryResult;
    const record = data?.data || {};

    const { form, formProps, saveButtonProps, onFinish } = useForm({
        action: "edit",
        successNotification: false,
        onMutationSuccess: ()  => {
            const message = translate("common.success");
            const description = translate("pages.locationsGroups.edit.success");
            notification.success({ message, description });
        },
        errorNotification: false,
        onMutationError: (data: any) => {
            const message = translate("common.error");
            const description = translate("pages.locationsGroups.edit.errors.badShape");
            notification.error({ message, description });
        },
    });

    const handleOnFinish = useCallback(async (params: any) => {
        const payload: any = { ...params };
        await onFinish(payload);
    }, [onFinish]);

    return (
        <Edit
            title={translate('buttons.edit')}
            saveButtonProps={saveButtonProps}
            headerButtons={EmptyHeadersButtons}
            isLoading={isLoading}
        >
            <Form
                {...formProps}
                layout="vertical"
                wrapperCol={{ span: 14 }}
                onFinish={handleOnFinish}
                initialValues={{...record}}
                name="location-group-edit"
            >

import React, { useCallback } from "react";
import { useTranslate, useShow, IResourceComponentsProps } from "@refinedev/core";
import { useForm } from "@refinedev/antd";
import { Form, Input, notification } from "antd";
import { Edit, InputMap, EmptyHeadersButtons } from "components";

export const LocationGroupEdit: React.FC<IResourceComponentsProps> = () => {
    const translate = useTranslate();
    const { queryResult } = useShow();
    const { data, isLoading } = queryResult;
    const record = data?.data || {};

    const { form, formProps, saveButtonProps, onFinish } = useForm({
        action: "edit",
        successNotification: false,
        onMutationSuccess: ()  => {
            const message = translate("common.success");
            const description = translate("pages.locationsGroups.edit.success");
            notification.success({ message, description });
        },
        errorNotification: false,
        onMutationError: (data: any) => {
            const message = translate("common.error");
            const description = translate("pages.locationsGroups.edit.errors.badShape");
            notification.error({ message, description });
        },
    });

    const handleOnFinish = useCallback(async (params: any) => {
        const payload: any = { ...params };
        await onFinish(payload);
    }, [onFinish]);

    return (
        <Edit
            title={translate('buttons.edit')}
            saveButtonProps={saveButtonProps}
            headerButtons={EmptyHeadersButtons}
            isLoading={isLoading}
        >
            <Form
                {...formProps}
                layout="vertical"
                wrapperCol={{ span: 14 }}
                onFinish={handleOnFinish}
                initialValues={{...record}}
                name="location-group-edit"
            >

And I am using Ant d. When complete the form, no action is taken. No called to onFinish

message.txt

5 Replies

kapa.ai•5mo ago

Hi @Sebastos. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided, it seems like you're trying to use a custom onFinish handler with the useForm hook from Refine. In your code, you've defined a handleOnFinish function that wraps the onFinish function provided by useForm. You're passing this handleOnFinish function to the onFinish prop of your Form component. However, it's important to note that the onFinish function from useForm is already designed to handle form submissions. It takes care of validation, mutation, and notifications. If you want to add additional behavior to the form submission, you can do so by providing callbacks to the onMutationSuccess and onMutationError options of useForm, as you've done in your code. If you're not seeing any action taken when you submit the form, it could be due to a few reasons: 1. There might be a validation error preventing the form from being submitted. Check if there are any validation rules that aren't being satisfied. 2. The onFinish function might not be called due to an issue with the Form component or its children. Make sure all form items are correctly set up and there are no issues preventing the form from being submitted. 3. There might be an issue with the useForm hook or the Edit component. Make sure you're using them correctly according to the Refine documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-form). If you're still having issues, you might want to check the Refine community discussions (https://github.com/refinedev/refine/discussions/4927) or Refine GitHub issues (https://github.com/refinedev/refine/issues/1617) for similar problems and their solutions. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

<@689846866837373077> kapa.ai is still learning and improving, please let us know how it did by reacting below

wise-white•5mo ago

@kapa.ai how to know there is a problem in the form validation?

kapa.ai•5mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- In Refine, form validation errors are typically handled by the useForm hook and the form component you're using (in your case, Ant Design's Form). If there's a validation error, the form submission will be prevented and the error will be displayed to the user. Here's how you can check for validation errors: 1. Check the form fields: Make sure all required fields are filled in and the input matches the expected format. For example, if a field requires a number, entering text will cause a validation error. 2. Check the validation rules: If you're using Ant Design's Form.Item component, you can specify validation rules using the rules prop. Check these rules to make sure they're being satisfied. For example, you might have a rule that requires a field to be a certain length. If the input doesn't meet this requirement, there will be a validation error. Here's an example of how to set validation rules:

   <Form.Item  
     label="Title"  
     name="title"  
     rules={[  
       {  
         required: true,  
       },  
       {  
         min: 5,  
       },  
     ]}  
   >  
     <Input />  
   </Form.Item>

   <Form.Item  
     label="Title"  
     name="title"  
     rules={[  
       {  
         required: true,  
       },  
       {  
         min: 5,  
       },  
     ]}  
   >  
     <Input />  
   </Form.Item>

In this example, the "Title" field is required and must be at least 5 characters long. 3. Check the error messages: If there's a validation error, an error message will typically be displayed next to the relevant field. This message will tell you what the problem is. 4. Check the console: If there's an issue with the form or the useForm hook, there might be an error or warning message in the browser console. Check the console for any messages related to your form. For more information on form validation in Refine, you can refer to the Refine documentation (https://refine.dev/docs/advanced-tutorials/forms/server-side-form-validation/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

<@689846866837373077> kapa.ai is still learning and improving, please let us know how it did by reacting below