IonInput getting error with React Hook Form

Question

Try to use a IonInput on a Ionic React project.

<IonInput { ...props } { ...register(props.name, { required, ...requiredOptions }) } />

Full Code :

const { register, handleSubmit, formState: { errors } } = useForm({
        
        mode: "onTouched",
        reValidateMode: "onChange"
    });

    const fields = [
        {
            label: "Firstname",
            required: true,
            requiredOptions: {

                maxLength: 10
            },
            props: {
                
                name: "firstname",
                type: "text",
                placeholder: "Enter a username"
            }
        },

        {
            label: "Age",
            required: true,
            requiredOptions: {

                min: 18,
                max: 99
            },
            props: {
                
                name: "age",
                type: "number",
                inputmode: "numeric",
                placeholder: "Enter your age"
            }
        }
    ];

    console.log(errors);
    
    const onSubmit = (data : any) => {
        
        console.log(data);
    }

    return (
        <IonPage>
            <IonHeader>
                <IonToolbar>
                    <IonTitle>React Hook Form</IonTitle>
                </IonToolbar>
            </IonHeader>
            <IonContent fullscreen>
                <IonHeader collapse="condense">
                    <IonToolbar>
                        <IonTitle size="large">React Hook Form</IonTitle>
                    </IonToolbar>
                </IonHeader>

                <IonCardSubtitle className="ion-text-center ion-margin">An example using React Hook Form</IonCardSubtitle>

                <form onSubmit={ handleSubmit(onSubmit) }>

                    { fields.map((field, index) => {

                        const { label, required, requiredOptions, props } = field;

                        return (
                            <IonItem key={ `form_field_${ index }` } lines="full">

                                <>
                                    <IonLabel position="fixed">{ label }</IonLabel>
                                    <IonInput { ...props } { ...register(props.name, { required, ...requiredOptions }) } />
                                </>
                                { required && errors[props.name] && <IonIcon icon={ alertCircleOutline } color="danger" /> }
                            </IonItem>
                        );
                    })}

                    <IonButton type="submit" className="ion-margin-top" expand="full">Submit</IonButton>
                </form>
            </IonContent>
        </IonPage>
        );

IonInput Will Get this error:

Type '{ onChange: ChangeHandler; onBlur: ChangeHandler; ref: RefCallBack; name: string; min?: string | number | undefined; max?: string | number | undefined; ... 7 more ...; inputmode?: undefined; } | { ...; }' is not assignable to type 'IntrinsicAttributes & IonInput & Pick<HTMLAttributes, "onBlur" | "onChange" | ... 250 more ... | "onTransitionEndCapture"> & StyleReactProps & RefAttributes<...>'. Type '{ onChange: ChangeHandler; onBlur: ChangeHandler; ref: RefCallBack; name: string; min?: string | number | undefined; max?: string | number | undefined; ... 7 more ...; inputmode?: undefined; }' is not assignable to type 'IonInput'. Types of property '"max"' are incompatible. Type 'string | number | undefined' is not assignable to type 'string | undefined'. Type 'number' is not assignable to type 'string | undefined'.

My Dependencies:

• @ionic/react": "^6.0.0"
• react-hook-form": "^7.27.0"

I did some research through internet but didnt get a fix. May anyone help? Moreover, are there any other forms framework are good for ionic project? Thanks!!

Answer 1

I had the same issue and found an article that motivated me to use Controlled Inputs.

Relevant Documentation: https://react-hook-form.com/get-started#IntegratingwithUIlibraries.

const El = () => {
  const { control, register, handleSubmit, formState: { errors } } = useForm({
      mode: "onTouched",
      reValidateMode: "onChange"
  });

  return <Controller
      render={({ field }) => (
          <IonInput
              {...field} onIonBlur={() => field.onBlur()} onIonChange={(e) => field.onChange(e.detail.value)}
              { ...props }
          >
          </IonInput>
      )}
      control={control}
      name={props.name}
      rules={{ required, ...requiredOptions }}
  />
}