Edit not working if form is not touch

Having this code if the form is not touch, save button is not working. Only performs a GET instade of PUT

message.txt

14 Replies

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 in the knowledge sources, it seems like you're experiencing an issue with the useForm hook in Refine. This hook is used to manage form state and handle form submissions. In the context of editing a record, the useForm hook is typically used with the action property set to "edit". This tells Refine that the form is being used to edit a record. The resource and id properties are used to specify the resource and the specific record that is being edited. Here is an example of how the useForm hook is typically used in an edit form:

const {
    saveButtonProps,
    handleSubmit,
    refineCore: { queryResult, onFinish, formLoading },
    register,
    control,
    formState: { errors },
} = useForm({
    action: "edit",
    resource: "order-items",
    id: 1,
});

const {
    saveButtonProps,
    handleSubmit,
    refineCore: { queryResult, onFinish, formLoading },
    register,
    control,
    formState: { errors },
} = useForm({
    action: "edit",
    resource: "order-items",
    id: 1,
});

In this example, the saveButtonProps object is passed to the save button in the form. When the save button is clicked, it triggers the onFinish function, which sends a PUT request to update the record. If the save button is only performing a GET request instead of a PUT request, it could be because the action property is not set to "edit", or the resource and id properties are not correctly set. Please ensure that these properties are correctly set in your useForm hook. If you're still experiencing issues, it could be due to a bug in Refine or a problem with your data provider. For more information, you can refer to the Refine documentation (https://refine.dev/docs/api-reference/hooks/form/useform). If you're still having trouble, please provide more information about your issue, including any error messages you're seeing and the exact behavior you're experiencing. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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

extended-salmon•4mo ago

@kapa.ai how to detect if there is any valdiation problem in the form or if the onFinish is not called?

kapa.ai•4mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- In Refine, you can use the formProps object returned by the useForm hook to detect if there are any validation problems in the form. The formProps object includes a validateFields method that you can use to manually trigger form validation. This method returns a promise that will be rejected if there are any validation errors. Here's an example of how you can use validateFields:

const { formProps } = useForm({
    action: "edit",
    resource: "posts",
    id: 1,
});

const handleSave = async () => {
    try {
        await formProps.validateFields();
        // If there are no validation errors, onFinish will be called
        formProps.onFinish();
    } catch (error) {
        // Handle validation errors here
        console.error(error);
    }
};

const { formProps } = useForm({
    action: "edit",
    resource: "posts",
    id: 1,
});

const handleSave = async () => {
    try {
        await formProps.validateFields();
        // If there are no validation errors, onFinish will be called
        formProps.onFinish();
    } catch (error) {
        // Handle validation errors here
        console.error(error);
    }
};

In this example, validateFields is called when the save button is clicked. If there are any validation errors, the promise returned by validateFields will be rejected, and the catch block will be executed. As for detecting if onFinish is not called, you could add a console log or some other form of logging in your onFinish function to see if it's being executed. If onFinish is not being called when you expect it to be, it could be because there are validation errors preventing the form from being submitted. For more information, you can refer to the Refine documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-form#return-values). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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

extended-salmon•4mo ago

@kapa.ai the problem is that handleSave is sometimes called, otherwise the button change to disabled, performs a GET and nothing else

kapa.ai•4mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Based on the information provided, it seems like there might be an issue with the state of your form or the way your save button is configured. In Refine, the useForm hook returns a formState object that you can use to check the state of the form. This object includes a isSubmitting property that you can use to check if the form is currently being submitted. If isSubmitting is true, it means that the form is currently being submitted, and the save button will be disabled. Here's an example of how you can use isSubmitting:

const { formState: { isSubmitting } } = useForm({
    action: "edit",
    resource: "posts",
    id: 1,
});

<Button type="primary" loading={isSubmitting} onClick={handleSave}>
    Save
</Button>

const { formState: { isSubmitting } } = useForm({
    action: "edit",
    resource: "posts",
    id: 1,
});

<Button type="primary" loading={isSubmitting} onClick={handleSave}>
    Save
</Button>

In this example, the loading prop of the Button component is set to isSubmitting. When isSubmitting is true, the button will be disabled and show a loading indicator. If the save button is disabled and a GET request is being performed, it could be because the form is in a submitting state, or there might be an issue with your handleSave function or your data provider. If you're still having issues, I would recommend checking the following: 1. Make sure your handleSave function is correctly defined and is being called when the save button is clicked. 2. Check if there are any validation errors in your form that might be preventing the form from being submitted. 3. Check if there are any issues with your data provider that might be causing the GET request. For more information, you can refer to the Refine documentation (https://refine.dev/docs/api-reference/hooks/form/useform). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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

extended-salmon•4mo ago

@kapa.ai this

const { formState: { isSubmitting } } = useForm({
    action: "edit",
    resource: "posts",
    id: 1,
});

const { formState: { isSubmitting } } = useForm({
    action: "edit",
    resource: "posts",
    id: 1,
});

not exists in the useForm

kapa.ai•4mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- I apologize for the confusion. You're correct, the isSubmitting property is not directly available from the useForm hook in Refine. However, you can use the formState property from the useForm hook to access the form's state, which includes information about validation errors. Here's an example:

const {  
 formState: { errors },  
} = useForm({  
 mode: "onChange",  
 defaultValues,  
});

const {  
 formState: { errors },  
} = useForm({  
 mode: "onChange",  
 defaultValues,  
});

In this example, errors is an object that contains any validation errors in the form. You can check this object to see if there are any validation problems in the form. As for detecting if onFinish is not being called, you could add a console log or some other form of logging in your onFinish function to see if it's being executed. If onFinish is not being called when you expect it to be, it could be because there are validation errors preventing the form from being submitted. For more information, you can refer to the Refine documentation (https://refine.dev/docs/api-reference/hooks/form/useform). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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

extended-salmon•4mo ago

@kapa.ai formState not exists in useForm

kapa.ai•4mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- I apologize for the confusion. You're correct, the formState property is not directly available from the useForm hook in Refine. The useForm hook in Refine returns different properties based on the package you're using. For example, the useForm hook from @refinedev/react-hook-form returns properties like register, handleSubmit, and errors:

const {  
 register,  
 handleSubmit,  
 formState: { errors },  
} = useForm();

const {  
 register,  
 handleSubmit,  
 formState: { errors },  
} = useForm();

In this example, errors is an object that contains any validation errors in the form. You can check this object to see if there are any validation problems in the form. For more information, you can refer to the Refine documentation (https://refine.dev/docs/packages/react-hook-form/useForm/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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