spiritual-aqua•2mo ago

In the edit page, how do you remove form values?

I have a resource with a key of "a". When editing, I need to dynamically remove this from submission. For example, if situation 1, the PATCH should be {val1: 5, a: 10}, for situation 2, the PATCH should be {val1: 5}

5 Replies

kapa.ai•2mo ago

Hi @Tyler. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To dynamically remove form values before submission in an edit page using Refine, you can modify the form data in the onFinish handler. This allows you to conditionally remove or alter data before it is sent to the API. Here's an example of how you can achieve this:

import { useForm, Create } from "@refinedev/antd";  
import { Form, Input } from "antd";  
  
const EditPage = () => {  
  const { formProps, saveButtonProps, onFinish } = useForm();  
  
  const handleOnFinish = (values) => {  
    // Conditionally remove the key "a" based on your situation
    if (/* condition for situation 2 */) {
      delete values.a;
    }
    onFinish(values);
  };  
  
  return (  
    <Create saveButtonProps={saveButtonProps}>  
      <Form {...formProps} onFinish={handleOnFinish} layout="vertical">  
        <Form.Item label="Val1" name="val1">  
          <Input />  
        </Form.Item>  
        <Form.Item label="A" name="a">  
          <Input />  
        </Form.Item>  
      </Form>  
    </Create>  
  );  
};

import { useForm, Create } from "@refinedev/antd";  
import { Form, Input } from "antd";  
  
const EditPage = () => {  
  const { formProps, saveButtonProps, onFinish } = useForm();  
  
  const handleOnFinish = (values) => {  
    // Conditionally remove the key "a" based on your situation
    if (/* condition for situation 2 */) {
      delete values.a;
    }
    onFinish(values);
  };  
  
  return (  
    <Create saveButtonProps={saveButtonProps}>  
      <Form {...formProps} onFinish={handleOnFinish} layout="vertical">  
        <Form.Item label="Val1" name="val1">  
          <Input />  
        </Form.Item>  
        <Form.Item label="A" name="a">  
          <Input />  
        </Form.Item>  
      </Form>  
    </Create>  
  );  
};

In this example, the handleOnFinish function checks a condition to determine whether to remove the key "a" from the form values before calling onFinish. You can replace the condition with your specific logic to decide when to remove the key. For more information on modifying form data before submission, you can refer to the Refine documentation on modifying data before submission. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@471159355085946931> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

spiritual-aquaOP•2mo ago

This is with @refinedev/mantine @kapa.ai This is with @refinedev/mantine

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- To dynamically remove form values before submission using @refinedev/mantine, you can utilize the transformValues function provided by the useForm hook. This function allows you to modify the form data before it is sent to the API. Here's an example of how you can achieve this:

import { useForm, Create } from "@refinedev/mantine";  
import { TextInput } from "@mantine/core";  
  
const CreatePage = () => {  
  const { saveButtonProps, getInputProps } = useForm({  
    initialValues: {  
      val1: "",  
      a: "",  
    },  
    transformValues: (values) => {
      // Conditionally remove the key "a" based on your situation
      if (/* condition for situation 2 */) {
        const { a, ...rest } = values;
        return rest;
      }
      return values;
    },  
  });  
  
  return (  
    <Create saveButtonProps={saveButtonProps}>  
      <form>  
        <TextInput  
          mt={8}  
          label="Val1"  
          placeholder="Val1"  
          {...getInputProps("val1")}  
        />  
        <TextInput  
          mt={8}  
          label="A"  
          placeholder="A"  
          {...getInputProps("a")}  
        />  
      </form>  
    </Create>  
  );  
};

import { useForm, Create } from "@refinedev/mantine";  
import { TextInput } from "@mantine/core";  
  
const CreatePage = () => {  
  const { saveButtonProps, getInputProps } = useForm({  
    initialValues: {  
      val1: "",  
      a: "",  
    },  
    transformValues: (values) => {
      // Conditionally remove the key "a" based on your situation
      if (/* condition for situation 2 */) {
        const { a, ...rest } = values;
        return rest;
      }
      return values;
    },  
  });  
  
  return (  
    <Create saveButtonProps={saveButtonProps}>  
      <form>  
        <TextInput  
          mt={8}  
          label="Val1"  
          placeholder="Val1"  
          {...getInputProps("val1")}  
        />  
        <TextInput  
          mt={8}  
          label="A"  
          placeholder="A"  
          {...getInputProps("a")}  
        />  
      </form>  
    </Create>  
  );  
};

In this example, the transformValues function is used to conditionally remove the key "a" from the form values based on your specific logic. You can replace the condition with your logic to decide when to remove the key. For more information on modifying form data before submission, you can refer to the Refine documentation on modifying data before submission with Mantine. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@471159355085946931> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

In the edit page, how do you remove form values?

Did you find this page helpful?