CODEWITHSUNDEEP
reactjsreact-hook-formprimereact
user17145524
user17145524

Reputation: 291

PrimeReact number input field with react-hook-form

I currently have the following code in my application:

 <Controller defaultValue={0.0} name={"create_lng"}
             control={createControl} rules={{
             required: {value: true, message: t("pleaseSiteLng")}
              }} 
             render={({field, fieldState}) => (
              <InputNumber minFractionDigits={2}
                           mode={"decimal"}
                           className={classNames(                                                                    
                            {"p-invalid": createErrors.create_lng})}
                           id={field.name} {...field} />
)}/>

Here I would now expect to be able to enter decimal numbers as defined. But as soon as I enter anything in the input field, even numbers, the value changes to NaN and is displayed. This only occurs with the InputNumber component, all other components can be filled without problems and also display the desired values.

I have seen that there is a property from react-hook-form "valueAsNumber", but I haven't found anything how to use it in a controller.

Does anyone here know how I can solve the problem?Does anyone here know how I can solve the problem?

Upvotes: 2

Views: 4661

Answers (2)

Doubka
Doubka

Reputation: 11

I encountered the same issue when working with Primereact InputNumber and Formik.

In my case the reason for unexpected behavior of InputNumber component is primereact custom onChange method of InputNumber:

    onChange?(e: InputNumberChangeParams): void 

    interface InputNumberChangeParams {
        originalEvent: React.SyntheticEvent;
        value: number | null;
    }

(Compared to InputText onChange property: onChange?: ChangeEventHandler<HTMLInputElement> | undefined )

formik.handleChange(e) expects e: React.ChangeEvent<any> which means I can't pass (e: InputNumberChangeParams) to the function. The solution for me was to use another function to handle the change and work only with e.value which is provided by InputNumber onChange method.

    onChange={(e): void => {
      formik.setFieldValue("fieldName", e.value);
    }}

Upvotes: 1

Melloware
Melloware

Reputation: 12039

I have updated this ticket: https://github.com/primefaces/primereact/issues/2547

I think there needs to be showcase example on how to use InputNumber with React Hook Forms if it is not straightforward like you are seeing.

Edit 07/30/2022: I have it working and here are two examples:

Price example must be between 0 and 250,000.

<Controller name="price" control={control} rules={{ required: 'Price is required.', min: 0, max: 250000 }} render={({ field, fieldState }) => (
   <>
      <label htmlFor={field.name} className={classNames({ 'p-error': errors.price })}>Price*</label>
      <InputNumber id={field.name} ref={field.ref} value={field.value} onBlur={field.onBlur} onValueChange={(e) => field.onChange(e)} mode="currency" currency="USD" locale="en-US" inputClassName={classNames({ 'p-invalid': fieldState.error })} />
      {getFormErrorMessage(fieldState)}
  </>
)} />

Year example must be between 1970-2030:

<Controller name="year" control={control} rules={{ required: 'Year is required.', min: 1970, max: 2050 }} render={({ field, fieldState }) => (
  <>
      <label htmlFor={field.name} className={classNames({ 'p-error': errors.year })}>Year*</label>
      <InputNumber id={field.name} ref={field.ref} value={field.value} onBlur={field.onBlur} onValueChange={(e) => field.onChange(e)} useGrouping={false} inputClassName={classNames({ 'p-invalid': fieldState.error })} />
      {getFormErrorMessage(fieldState)}
   </>
)} />

Upvotes: 4

Related Questions