rare-sapphire•11h ago

using `useForm` in a `Show` action possible?

using useForm in a Show action possible? basically i want my show screen to look like my edit screen with minimal effort, and by that, i mean just disabling all inputs, how can i achieve this? My code looks like this

import { Edit, Show, useAutocomplete } from "@refinedev/mui";
import { Box, TextField, Autocomplete, createFilterOptions, Typography } from "@mui/material";
import { useForm } from "@refinedev/react-hook-form";
import { Controller } from "react-hook-form";
import { d } from "../../common/constants";
import { useParams } from "react-router-dom";
import { useParsed } from "@refinedev/core";

export const CheckInShow = () => {
  const { id } = useParams();
  // const { id } = useParsed();

  const {
    saveButtonProps,
    refineCore: { query },
    register,
    control,
    formState: { errors },
  } = useForm({
    refineCoreProps: {
      resource: "checkins",
      id,
    },
  });

  const checkInLogData = query?.data?.data;

  return (
    <Show>
      <Box component="form" sx={{ display: "flex", flexDirection: "column" }} autoComplete="off">
        <TextField
          {...register("id", {
            required: "This field is required",
            valueAsNumber: true,
          })}
          error={!!(errors as any)?.id}
          helperText={(errors as any)?.id?.message}
          margin="normal"
          fullWidth
          InputLabelProps={{ shrink: true }}
          type="number"
          label="Id"
          name="id"
          disabled
        />        
      </Box>
    </Show>
  );
};

import { Edit, Show, useAutocomplete } from "@refinedev/mui";
import { Box, TextField, Autocomplete, createFilterOptions, Typography } from "@mui/material";
import { useForm } from "@refinedev/react-hook-form";
import { Controller } from "react-hook-form";
import { d } from "../../common/constants";
import { useParams } from "react-router-dom";
import { useParsed } from "@refinedev/core";

export const CheckInShow = () => {
  const { id } = useParams();
  // const { id } = useParsed();

  const {
    saveButtonProps,
    refineCore: { query },
    register,
    control,
    formState: { errors },
  } = useForm({
    refineCoreProps: {
      resource: "checkins",
      id,
    },
  });

  const checkInLogData = query?.data?.data;

  return (
    <Show>
      <Box component="form" sx={{ display: "flex", flexDirection: "column" }} autoComplete="off">
        <TextField
          {...register("id", {
            required: "This field is required",
            valueAsNumber: true,
          })}
          error={!!(errors as any)?.id}
          helperText={(errors as any)?.id?.message}
          margin="normal"
          fullWidth
          InputLabelProps={{ shrink: true }}
          type="number"
          label="Id"
          name="id"
          disabled
        />        
      </Box>
    </Show>
  );
};

2 Replies

kapa.ai•11h ago

Hi @flankieflew. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, it is possible to use useForm in a Show action, and you can achieve your goal of making the show screen look like the edit screen with minimal effort. Here's how you can modify your code to accomplish this: 1. Change the Show component to Edit:

<Edit saveButtonProps={saveButtonProps}>
  {/* ... */}
</Edit>

<Edit saveButtonProps={saveButtonProps}>
  {/* ... */}
</Edit>

2. Use the action prop in useForm to specify that it's a "show" action:

const {
  saveButtonProps,
  refineCore: { query },
  register,
  control,
  formState: { errors },
} = useForm({
  refineCoreProps: {
    resource: "checkins",
    id,
    action: "edit", // This will fetch the data
  },
  disabled: true, // This will disable all inputs
});

const {
  saveButtonProps,
  refineCore: { query },
  register,
  control,
  formState: { errors },
} = useForm({
  refineCoreProps: {
    resource: "checkins",
    id,
    action: "edit", // This will fetch the data
  },
  disabled: true, // This will disable all inputs
});

3. Remove the disabled prop from individual form fields, as it's now handled globally. Here's the modified version of your code:

import { Edit, useAutocomplete } from "@refinedev/mui";
import { Box, TextField, Autocomplete, createFilterOptions, Typography } from "@mui/material";
import { useForm } from "@refinedev/react-hook-form";
import { Controller } from "react-hook-form";
import { d } from "../../common/constants";
import { useParams } from "react-router-dom";
import { useParsed } from "@refinedev/core";

export const CheckInShow = () => {
  const { id } = useParams();

  const {
    saveButtonProps,
    refineCore: { query },
    register,
    control,
    formState: { errors },
  } = useForm({
    refineCoreProps: {
      resource: "checkins",
      id,
      action: "edit", // This will fetch the data
    },
    disabled: true, // This will disable all inputs
  });

  const checkInLogData = query?.data?.data;
return (
    <Edit saveButtonProps={saveButtonProps}>
      <Box component="form" sx={{ display: "flex", flexDirection: "column" }} autoComplete="off">
        <TextField
          {...register("id", {
            required: "This field is required",
            valueAsNumber: true,
          })}
          error={!!(errors as any)?.id}
          helperText={(errors as any)?.id?.message}
          margin="normal"
          fullWidth
          InputLabelProps={{ shrink: true }}
          type="number"
          label="Id"
          name="id"
        />        
      </Box>
    </Edit>
  );
};

import { Edit, useAutocomplete } from "@refinedev/mui";
import { Box, TextField, Autocomplete, createFilterOptions, Typography } from "@mui/material";
import { useForm } from "@refinedev/react-hook-form";
import { Controller } from "react-hook-form";
import { d } from "../../common/constants";
import { useParams } from "react-router-dom";
import { useParsed } from "@refinedev/core";

export const CheckInShow = () => {
  const { id } = useParams();

  const {
    saveButtonProps,
    refineCore: { query },
    register,
    control,
    formState: { errors },
  } = useForm({
    refineCoreProps: {
      resource: "checkins",
      id,
      action: "edit", // This will fetch the data
    },
    disabled: true, // This will disable all inputs
  });

  const checkInLogData = query?.data?.data;
return (
    <Edit saveButtonProps={saveButtonProps}>
      <Box component="form" sx={{ display: "flex", flexDirection: "column" }} autoComplete="off">
        <TextField
          {...register("id", {
            required: "This field is required",
            valueAsNumber: true,
          })}
          error={!!(errors as any)?.id}
          helperText={(errors as any)?.id?.message}
          margin="normal"
          fullWidth
          InputLabelProps={{ shrink: true }}
          type="number"
          label="Id"
          name="id"
        />        
      </Box>
    </Edit>
  );
};

This approach allows you to reuse your edit form for the show view with minimal changes. The useForm hook will fetch the data for the record, and all inputs will be disabled. For more information on the useForm hook and its properties, you can refer to the following documentation: useForm Properties (https://refine.dev/docs/packages/react-hook-form/use-form/#properties) useForm Actions (https://refine.dev/docs/data/hooks/use-form/#action-) These resources provide detailed information on how to use the useForm hook in different scenarios, including the "show" action. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•11h ago

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