Refine•15mo ago

How to catch error from Form Antd ?

kapa.ai•9/24/24, 7:21 AM

Hi @tingadev. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

kapa.ai•9/24/24, 7:21 AM

----------------------
To catch errors from a Form in Ant Design when using refine, you can utilize several methods depending on the context of the error. Here are some approaches based on the provided knowledge sources:

Using

onMutationError

onMutationError

useForm

useForm

The

onMutationError

onMutationError

callback in

useForm

useForm

is called after a mutation fails. This can be useful for catching errors during form submission.

useForm({  
  onMutationError: (data, variables, context, isAutoSave) => {  
    console.log({ data, variables, context, isAutoSave });  
  },  
});

useForm({  
  onMutationError: (data, variables, context, isAutoSave) => {  
    console.log({ data, variables, context, isAutoSave });  
  },  
});

Source (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-form/#onmutationerror)

Customizing Error Notifications with
```
errorNotification
```
```
errorNotification
```

You can customize the error notification that pops up after form submission fails using the

errorNotification

errorNotification

property in

useForm

useForm

useForm({  
  action: "create",  
  resource: "post",  
  errorNotification: (data, values, resource) => {  
    return {  
      message: `Something went wrong when deleting ${data.id}`,  
      description: "Error",  
      type: "error",  
    };  
  },  
});

useForm({  
  action: "create",  
  resource: "post",  
  errorNotification: (data, values, resource) => {  
    return {  
      message: `Something went wrong when deleting ${data.id}`,  
      description: "Error",  
      type: "error",  
    };  
  },  
});

Source (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-form/#errornotification)

Handling Errors in
```
onFinish
```
```
onFinish
```

If you have a custom handleOnFinishhandleOnFinish method, you can wrap it in a try...catchtry...catch block to handle errors and display notifications using the useNotificationuseNotification hook.

const handleOnFinish = async (values) => {
    try {
        // Your custom logic
        await onFinish({
            fullName: `${values.name} ${values.surname}`,
        });
    } catch (error) {
        // Handle error
        notification.error({
            message: 'Error',
            description: error.message,
        });
    }
};

const handleOnFinish = async (values) => {
    try {
        // Your custom logic
        await onFinish({
            fullName: `${values.name} ${values.surname}`,
        });
    } catch (error) {
        // Handle error
        notification.error({
            message: 'Error',
            description: error.message,
        });
    }
};

Source (https://github.com/refinedev/refine/issues/6171)

kapa.ai•9/24/24, 7:21 AM

Using `validateFieldsvalidateFields` for Step Forms

For step forms, you can use validateFieldsvalidateFields to catch validation errors before proceeding to the next step.

<Button
    onClick={() => {
        form.validateFields()
            .then(() => gotoStep(current + 1))
            .catch((error) => {
                // Handle error
                console.error(error);
            });
    }}
>
    Next
</Button>

<Button
    onClick={() => {
        form.validateFields()
            .then(() => gotoStep(current + 1))
            .catch((error) => {
                // Handle error
                console.error(error);
            });
    }}
>
    Next
</Button>

Source (https://github.com/refinedev/refine/issues/4621)

Handling Server-Side Validation Errors

For server-side validation errors, ensure your

dataProvider

dataProvider

returns a rejected promise with an errorserrors field. The

useForm

useForm

hook will automatically update the error state with the rejected errorserrors field.

npm create refine-app@latest -- --example server-side-form-validation-antd

npm create refine-app@latest -- --example server-side-form-validation-antd

Source (https://refine.dev/docs/examples/form/antd/serverSideFormValidation/)

By using these methods, you can effectively catch and handle errors in Ant Design forms when using refine. For more detailed examples and documentation, you can refer to the refine documentation (https://refine.dev/docs/).
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•9/24/24, 7:21 AM

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

moderate-tomatoOP•9/24/24, 7:24 AM

@kapa.ai, How to catch error from field of Form Antd ?

kapa.ai•9/24/24, 7:24 AM

Let me check the knowledge base for you. One moment!

kapa.ai•9/24/24, 7:24 AM

----------------------
To catch errors from a specific field in an Ant Design Form when using refine, you can use the rulesrules property of the

Form.Item

Form.Item

component to define validation rules. Additionally, you can handle server-side validation errors by ensuring your

dataProvider

dataProvider

returns errors in a specific format. Here are the steps and examples:

Client-Side Validation with `rulesrules` Property

You can define validation rules directly in the

Form.Item

Form.Item

component using the rulesrules property. This allows you to catch and display errors for specific fields.

import { Form, Input } from "antd";

<Form>
  <Form.Item
    label="Title"
    name="title"
    rules={[
      { required: true, message: "Title is required" },
      { min: 5, message: "Title must be at least 5 characters" },
    ]}
  >
    <Input />
  </Form.Item>
  ...
</Form>

import { Form, Input } from "antd";

<Form>
  <Form.Item
    label="Title"
    name="title"
    rules={[
      { required: true, message: "Title is required" },
      { min: 5, message: "Title must be at least 5 characters" },
    ]}
  >
    <Input />
  </Form.Item>
  ...
</Form>

Source (https://refine.dev/docs/advanced-tutorials/forms/custom-form-validation/)

Custom Validation with `validatorvalidator` Function

For more complex validation logic, you can use the validatorvalidator function within the rulesrules property.

<Form>
  <Form.Item
    label="Title"
    name="title"
    rules={[
      {
        validator: async (_, value) => {
          if (!value || value.length < 5) {
            return Promise.reject(new Error("Title must be at least 5 characters"));
          }
          // Add custom validation logic here
          return Promise.resolve();
        },
      },
    ]}
  >
    <Input />
  </Form.Item>
  ...
</Form>

<Form>
  <Form.Item
    label="Title"
    name="title"
    rules={[
      {
        validator: async (_, value) => {
          if (!value || value.length < 5) {
            return Promise.reject(new Error("Title must be at least 5 characters"));
          }
          // Add custom validation logic here
          return Promise.resolve();
        },
      },
    ]}
  >
    <Input />
  </Form.Item>
  ...
</Form>

Source (https://refine.dev/docs/examples/form/antd/custom-form-validation/)

Server-Side Validation

To handle server-side validation errors, ensure your

dataProvider

dataProvider

returns a rejected promise with an errorserrors field. The

useForm

useForm

hook will automatically update the error state with the rejected errorserrors field.

kapa.ai•9/24/24, 7:24 AM

import { HttpError } from "@refinedev/core";

const error: HttpError = {
  message: "An error occurred while updating the record.",
  statusCode: 400,
  errors: {
    title: ["Title is required"],
    content: {
      key: "form.error.content",
      message: "Content is required.",
    },
    tags: true,
  },
};

import { HttpError } from "@refinedev/core";

const error: HttpError = {
  message: "An error occurred while updating the record.",
  statusCode: 400,
  errors: {
    title: ["Title is required"],
    content: {
      key: "form.error.content",
      message: "Content is required.",
    },
    tags: true,
  },
};

Source (https://refine.dev/docs/guides-concepts/forms/#server-side-validation-)

Using `setFieldssetFields` Method

You can programmatically set errors on specific fields using the setFieldssetFields method of the FormInstanceFormInstance.

import { Form } from "antd";

const form = Form.useFormInstance();

const setErrors = (errorData) => {
  Object.entries(errorData).forEach(([field, errors]) => {
    form.setFields([{ name: field, errors: errors ?? [] }]);
  });
};

// Example usage
setErrors({
  title: ["Title is required"],
  content: ["Content is required"],
});

import { Form } from "antd";

const form = Form.useFormInstance();

const setErrors = (errorData) => {
  Object.entries(errorData).forEach(([field, errors]) => {
    form.setFields([{ name: field, errors: errors ?? [] }]);
  });
};

// Example usage
setErrors({
  title: ["Title is required"],
  content: ["Content is required"],
});

Source (https://github.com/refinedev/refine/issues/2131)

By using these methods, you can effectively catch and handle errors for specific fields in Ant Design forms when using refine. For more detailed examples and documentation, you can refer to the refine documentation (https://refine.dev/docs/).
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•9/24/24, 7:24 AM

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

How to catch error from Form Antd ?

Using
`onMutationError`
`onMutationError`
in
`useForm`
`useForm`

Customizing Error Notifications with
`errorNotification`
`errorNotification`

Handling Errors in
`onFinish`
`onFinish`

Using `validateFieldsvalidateFields` for Step Forms

Handling Server-Side Validation Errors

Client-Side Validation with `rulesrules` Property

Custom Validation with `validatorvalidator` Function

Server-Side Validation

Using `setFieldssetFields` Method

Using
`onMutationError`
`onMutationError`
in
`useForm`
`useForm`

Customizing Error Notifications with
`errorNotification`
`errorNotification`

Handling Errors in
`onFinish`
`onFinish`

Using
`validateFields`
`validateFields`
`validateFields`
`validateFields` for Step Forms

Handling Server-Side Validation Errors

Client-Side Validation with
`rules`
`rules`
`rules`
`rules` Property

Custom Validation with
`validator`
`validator`
`validator`
`validator` Function

Server-Side Validation

Using
`setFields`
`setFields`
`setFields`
`setFields` Method

How to catch error from Form Antd ?

Using onMutationErroronMutationError in useFormuseForm

Customizing Error Notifications with errorNotificationerrorNotification

Handling Errors in onFinishonFinish

Using validateFieldsvalidateFields for Step Forms

Handling Server-Side Validation Errors

Client-Side Validation with rulesrules Property

Custom Validation with validatorvalidator Function

Server-Side Validation

Using setFieldssetFields Method

Using onMutationErroronMutationError in useFormuseForm

Customizing Error Notifications with errorNotificationerrorNotification

Handling Errors in onFinishonFinish

Using validateFieldsvalidateFieldsvalidateFieldsvalidateFields for Step Forms

Handling Server-Side Validation Errors

Client-Side Validation with rulesrulesrulesrules Property

Custom Validation with validatorvalidatorvalidatorvalidator Function

Server-Side Validation

Using setFieldssetFieldssetFieldssetFields Method

Using
`onMutationError`
`onMutationError`
in
`useForm`
`useForm`

Customizing Error Notifications with
`errorNotification`
`errorNotification`

Handling Errors in
`onFinish`
`onFinish`

Using `validateFieldsvalidateFields` for Step Forms

Client-Side Validation with `rulesrules` Property

Custom Validation with `validatorvalidator` Function

Using `setFieldssetFields` Method

Using
`onMutationError`
`onMutationError`
in
`useForm`
`useForm`

Customizing Error Notifications with
`errorNotification`
`errorNotification`

Handling Errors in
`onFinish`
`onFinish`

Using
`validateFields`
`validateFields`
`validateFields`
`validateFields` for Step Forms

Client-Side Validation with
`rules`
`rules`
`rules`
`rules` Property

Custom Validation with
`validator`
`validator`
`validator`
`validator` Function

Using
`setFields`
`setFields`
`setFields`
`setFields` Method