The parameter cannot be assigned a value of type 'string' as it requires a value that matches the format '`${string}` | `${string}.${string}` | `${string}.${number}`'

Question

The parameter cannot be assigned a value of type 'string' as it requires a value that matches the format '`${string}` | `${string}.${string}` | `${string}.${number}`'

I recently updated my react-hook-forms from version 6 to version 7.

Following the instructions in the migration guide, I made changes to the register method. However, after making these changes, I encountered the following error:

The argument being passed is a string and not compatible with the parameter type '${string} | ${string}.${string} | ${string}.${number}'. TS2345

Even though I am passing a string name to the Register function correctly, it does not accept my parameter if it is not an exact string match.

If anyone has faced a similar issue or has any suggestions, I would greatly appreciate your help. Thank you in advance!

reactjs typescript react-hook-form

Answer 1

Answer №1

register() function in react-hook-form version 7 doesn't accept a regular string as input, but rather a string literal. The literal value should match one of the field names defined in the form:

interface IFormValues {
  firstName: string;
  lastName: string;
}

const { register, handleSubmit } = useForm<IFormValues>();

When providing a generic type to the useForm hook, the register method expects to receive either the literal firstName or lastName; passing any other string or value will result in a type error.

Solution

As described in the official example, when using useFieldArray and dynamically creating fields using map, it's necessary to explicitly assert the name as a constant before passing it to register. This is done to prevent type widening issues that can occur when mixing string literals with index numbers:

<input key={field.id} {...register(`test.${index}.test` as const)}  />

Answer 2

register() function in react-hook-form version 7 doesn't accept a regular string as input, but rather a string literal. The literal value should match one of the field names defined in the form:

interface IFormValues {
  firstName: string;
  lastName: string;
}

const { register, handleSubmit } = useForm<IFormValues>();

When providing a generic type to the useForm hook, the register method expects to receive either the literal firstName or lastName; passing any other string or value will result in a type error.

Solution

As described in the official example, when using useFieldArray and dynamically creating fields using map, it's necessary to explicitly assert the name as a constant before passing it to register. This is done to prevent type widening issues that can occur when mixing string literals with index numbers:

<input key={field.id} {...register(`test.${index}.test` as const)}  />

Answer 3

Answer №2

When utilizing the Controller feature, it is possible to include conditional rendering for the name property, which can make errors disappear magically. :)

const formFields = [
  {
    id: 1,
    name: "youtubeUrl",
    placeholder: "Youtube URL",
  },
  {
    id: 2,
    name: "videoName",
    placeholder: "Video Name",
  },
];

// Form section begins here
<form onSubmit={handleSubmit(onSubmit)}>
 {formFields.map((item) => {
  return (
    <Box key={item.id}>
      <Controller
       name={
       item.name === "youtubeUrl" ? "youtubeUrl" 
       : "videoName" } // <---- applying conditional rendering here
       control={control}
       render={({ field: { onChange, value } }) => (
       <TextField
       size="small"
       error={errors[item.name] ? true : false}
       fullWidth
       onChange={onChange}
       value={value}
       placeholder={item.placeholder}
       inputProps={{
       "aria-label": item.placeholder,
       }}
       />
       )}
       />
                    
   </Box>
 </form>

Answer 4

When utilizing the Controller feature, it is possible to include conditional rendering for the name property, which can make errors disappear magically. :)

const formFields = [
  {
    id: 1,
    name: "youtubeUrl",
    placeholder: "Youtube URL",
  },
  {
    id: 2,
    name: "videoName",
    placeholder: "Video Name",
  },
];

// Form section begins here
<form onSubmit={handleSubmit(onSubmit)}>
 {formFields.map((item) => {
  return (
    <Box key={item.id}>
      <Controller
       name={
       item.name === "youtubeUrl" ? "youtubeUrl" 
       : "videoName" } // <---- applying conditional rendering here
       control={control}
       render={({ field: { onChange, value } }) => (
       <TextField
       size="small"
       error={errors[item.name] ? true : false}
       fullWidth
       onChange={onChange}
       value={value}
       placeholder={item.placeholder}
       inputProps={{
       "aria-label": item.placeholder,
       }}
       />
       )}
       />
                    
   </Box>
 </form>

The parameter cannot be assigned a value of type 'string' as it requires a value that matches the format '`${string}` | `${string}.${string}` | `${string}.${number}`'

Answer №1

Solution

Answer №2

Similar questions

What are the steps to execute a Next.js app post cloning the repository?

Set the parameter as optional when the type is null or undefined

Focusing on an input element in Angular2+

When typing declarations are used, they clarify whether the entity being referenced is an Object or

Angular ReactiveForms not receiving real-time updates on dynamic values

Encountering an error when attempting to generate a production build after running the npm install command with the

Issue: The UserComponent is attempting to set the property 'id' of an undefined object, resulting in an error

What is the reason for the immediate application of the set function in a useState hook within asynchronous functions?

Learn how to update a fixed value by adding the content entered into the Input textfield using Material-UI

Cross-origin resource sharing (CORS) issue encountered while trying to play an mp

Error in IONIC 3: The code is unable to read the 'nativeElement' property due to an undefined value, resulting in a TypeError

What strategies and techniques should be considered when creating websites optimized for mobile devices?

What is the reason behind the Typescript compiler not converting .ts files to .js files automatically?

How to dynamically disable a checkbox in Angular reactive forms depending on the value of another checkbox

The error "Rollup EMFILE: exceeding file limit with material-ui icons" is appearing due to an

Enhancing Security: Implementing Node.js API Authentication

How can I bind the ID property of a child component from a parent component in Angular 2 using @Input?

tips for concealing a row in the mui data grid

Retrieve the values of private variables within a defined function

The getServerSession() method in NextAuth fails to retrieve all of the user fields when called in an API route