HTML Input values are non numeric values

Issue

So, Im trying to push values to my backend but for some reason my values are thrown as an error back at me with Expected type Float. Float cannot represent non numeric value: \"33\""

I am using react-hook-forms and Ive set it the following (This is a custom component that I am expanding on to)

    <Input
            label="Cost"
            min={0}
            placeholder="Enter Amount"
            name="cost"
            type="number"
            register={register}
            required={{
              required: 'Please enter a number',
               valueAsNumber: true,
              pattern: {
                value: currencyRegex,
                message: 'Please enter a valid number',
              },
            }}
            error={errors.cost && <Error message={errors.cost.message} />}
          />

This works but the issue is here I can type in ANY number even if its negative or has special characters, it will accept it and if I remove valueAsNumber: true, then the regex works but I get this error then Expected type Float. Float cannot represent non numeric value: \"33\""

Ive tried so many things to fix this but with no real success and Ive been stuck on this for hours. Tried looking on the internet for some solution but again It just feels like a waste of time, because of such a specific issue. If anyone has a solution/fix I would appreciate it

Solution

So react-hook-forms has a nifty thing called validate that you can use with register so you can then say the following

Its not exactly a fix for regex and string values but atleast you can validate the values with a message depending on your needs and it works with valueAsNumber

   <Input
            label="Provide a number"
            placeholder="Number value here"
            name="number"
            type="number"
            required={{
              valueAsNumber: true,
              required: 'Please enter a number',
            ### Here if you add this then the value will never be a minus value
              min: {
                value: 1,
                message: 'Please enter a valid number (The number must be greater than 0)',
              },
            }}
            error={errors.cost && <Error message={errors.cost.message} />}
          />
       

Hope this helps anyone out there with the same issue

Answered By – Faziki

Answer Checked By – Marie Seifert (AngularFixing Admin)

Leave a Reply

Your email address will not be published.