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?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 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.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0