flat-fuchsia•12mo ago

Add Type to useForm

How do I make the object that I am manipulating, with the help of useForm hook, type safe? For instance, I know I can do things like:

<TextField
          {...register("email", {
            required: "This field is required",
            pattern: {
              value: /\S+@\S+\.\S+/,
              message: "Please enter a valid email address",
            },
          })}
          error={!!(errors as any)?.email}
          helperText={(errors as any)?.email?.message}
          margin="normal"
          fullWidth
          InputLabelProps={{ shrink: true }}
          type="email"
          label={"Email"}
          name="email"
        />

<TextField
          {...register("email", {
            required: "This field is required",
            pattern: {
              value: /\S+@\S+\.\S+/,
              message: "Please enter a valid email address",
            },
          })}
          error={!!(errors as any)?.email}
          helperText={(errors as any)?.email?.message}
          margin="normal"
          fullWidth
          InputLabelProps={{ shrink: true }}
          type="email"
          label={"Email"}
          name="email"
        />

But how do i ensure email is type-safe with respect to some interface? For instance, I have a user interface that I would like to apply to my useForm, so that way I make sure I only perform the proper useForm actions on the fields that exist for user

3 Replies

kapa.ai•12mo ago

Hi @nick_montoya. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You can make your form type-safe by defining an interface for your form values and passing it to the useForm hook. This way, TypeScript will enforce that the fields you're manipulating with useForm match the fields in your interface. Here's an example of how you can do this:

interface IUser {
  email: string;
  // other fields...
}

const { register, errors } = useForm<IUser>();

// Now when you use register, it will be type-safe with respect to IUser
<TextField
  {...register("email", {
    required: "This field is required",
    pattern: {
      value: /\S+@\S+\.\S+/,
      message: "Please enter a valid email address",
    },
  })}
  error={!!errors.email}
  helperText={errors.email?.message}
  margin="normal"
  fullWidth
  InputLabelProps={{ shrink: true }}
  type="email"
  label={"Email"}
  name="email"
/>

interface IUser {
  email: string;
  // other fields...
}

const { register, errors } = useForm<IUser>();

// Now when you use register, it will be type-safe with respect to IUser
<TextField
  {...register("email", {
    required: "This field is required",
    pattern: {
      value: /\S+@\S+\.\S+/,
      message: "Please enter a valid email address",
    },
  })}
  error={!!errors.email}
  helperText={errors.email?.message}
  margin="normal"
  fullWidth
  InputLabelProps={{ shrink: true }}
  type="email"
  label={"Email"}
  name="email"
/>

In this example, IUser is the interface that represents your user. By passing IUser to useForm, you're telling TypeScript that the form values should match the IUser interface. This means that if you try to register a field that isn't in IUser, TypeScript will give you an error. This example is based on the information provided in the refine documentation (https://refine.dev/docs/api-reference/core/hooks/useForm/) and blog (https://refine.dev/blog/react-crud-app-with-dynamic-form-ant-design/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•12mo ago

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

stormy-gold•12mo ago

Hey @nick_montoya, You can check the generics of the useForm on the documentation -> https://refine.dev/docs/api-reference/core/hooks/useForm/#type-parameters