'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?



Solution 1:[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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Melloware