awake-maroonA
Refine•13mo ago•
4 replies
awake-maroon

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>
  );
};
Was this page helpful?