PrimeReact number input field with react-hook-form

Question

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?

Answer 1

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)}
   </>
)} />