genetic-orange•2y ago

To reset inputField after useForm successfully saves?

const {
    register,
    formState: { errors },
    handleSubmit,
    refineCore: {onFinish, id, setId},
  } = useForm<IPointDetail, HttpError, Nullable<IPointDetail>>({
    refineCoreProps: {
      resource: "point_detail",
      action: "create",
      redirect: "list",
    },
  });

const {
    register,
    formState: { errors },
    handleSubmit,
    refineCore: {onFinish, id, setId},
  } = useForm<IPointDetail, HttpError, Nullable<IPointDetail>>({
    refineCoreProps: {
      resource: "point_detail",
      action: "create",
      redirect: "list",
    },
  });

<OutlinedInput
                  type="number"
                  id="point"
                  error={!!errors.point}
                  {...register("point", {
                    required: t(
                      "errors.required.field",
                      {
                        field: "point",
                      },
                    ),
                  })}
                  style={{height: "40px"}}
                />

<OutlinedInput
                  type="number"
                  id="point"
                  error={!!errors.point}
                  {...register("point", {
                    required: t(
                      "errors.required.field",
                      {
                        field: "point",
                      },
                    ),
                  })}
                  style={{height: "40px"}}
                />

I want to make the point an empty field after it's saved.

5 Replies

kapa.ai•2y ago

Hi @florent_26629. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To reset the form fields after a successful save, you can use the reset method from the useForm hook. This method resets the values of all fields in the form. Here is an example of how you can use it:

const {
    register,
    formState: { errors },
    handleSubmit,
    reset, // Destructure reset from useForm
    refineCore: {onFinish, id, setId},
  } = useForm<IPointDetail, HttpError, Nullable<IPointDetail>>({
    refineCoreProps: {
      resource: "point_detail",
      action: "create",
      redirect: "list",
    },
  });

// After onFinish, call reset
onFinish(variables).then(() => {
    reset(); // This will reset all fields in the form
});

const {
    register,
    formState: { errors },
    handleSubmit,
    reset, // Destructure reset from useForm
    refineCore: {onFinish, id, setId},
  } = useForm<IPointDetail, HttpError, Nullable<IPointDetail>>({
    refineCoreProps: {
      resource: "point_detail",
      action: "create",
      redirect: "list",
    },
  });

// After onFinish, call reset
onFinish(variables).then(() => {
    reset(); // This will reset all fields in the form
});

Please note that the reset method will reset all fields in the form. If you want to reset a specific field, you can pass an object to the reset method with the field name and the value you want to reset it to. For example, reset({ point: "" }) will reset only the point field. For more information, you can refer to the refine documentation (https://refine.dev/docs/guides-concepts/forms/#server-side-validation-). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

genetic-orangeOP•2y ago

@kapa.ai onFinish(variables).then(() => { reset({ point: "" }); // This will reset all fields in the form }); What values should exist for variables?

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The variables in the onFinish function represent the values of the form fields when the form is submitted. These values are automatically passed to the onFinish function by the useForm hook when the form is submitted. In your case, if your form has a field named point, the variables object will have a property point with the value of the field. For example, if the user entered 10 in the point field, the variables object will be { point: 10 }. Here's an example of how you can use it:

const onSubmit = (variables: FormValues) => {
    onFinish(variables).then(() => {
        reset({ point: "" }); // This will reset the point field in the form
    });
};

// In your form
<form onSubmit={handleSubmit(onSubmit)}>
    {/* form fields */}
</form>

const onSubmit = (variables: FormValues) => {
    onFinish(variables).then(() => {
        reset({ point: "" }); // This will reset the point field in the form
    });
};

// In your form
<form onSubmit={handleSubmit(onSubmit)}>
    {/* form fields */}
</form>

In this example, handleSubmit is a function from the useForm hook that handles form submission. It takes a callback function (onSubmit in this case) which is called when the form is submitted. The variables parameter of the onSubmit function will automatically receive the values of the form fields. For more information, you can refer to the refine documentation (https://refine.dev/docs/guides-concepts/forms/#server-side-validation-). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

To reset inputField after useForm successfully saves?

Did you find this page helpful?