How to input only number in react-hook-form

Question

I'm using react-hook-form for my input components, but there is one problem. In some text field, for example, text field for validation that take only number, i don't know how to do that, with normal textInput, we can use regex, like

 const [numberInput, setNumberInput] = useState("")
  function onTextChanged(value) {
    setNumberInput(value.replace(/[^0-9]/, "")) 
  }

and put that function and hook value on onTextChange and value respectively , i tried same method above on react-hook-form, but it won't work! i still can input other character like "+" or "-", of course using numeric keyboard

So here is TextField component

export interface HTextFieldProps extends TextFieldProps {
  control: Control<any>
  name: string
  defaultValue?: string
}

/**
 * Describe your component here
 */
export const HTextField = function HookformTextField(props: HTextFieldProps) {
  const { name, control, defaultValue = "", ...restProps } = props

  return (
    <Controller
      control={control}
      name={name}
      render={({ field: { onChange, value }, fieldState: { error } }) => (
        <TextField
          {...restProps}
          onChangeText={onChange}
          value={value}
          defaultValue={defaultValue}
          error={(error && error.message) as TxKeyPath}
        />
      )}
      defaultValue={defaultValue}
    />
  )
}

Here is when i use this

         <HTextField
            onChangeText={(value) => onTextChanged(value)}
            value={numberInput}
            name={"times"}
            control={control}
            autoCapitalize="none"
            keyboardType={Platform.OS === "android" ? "numeric" : "number-pad"}
            returnKeyType="done"
            inputStyle={INPUT_STYLE}
            required
          />

So how can i use only number in react-hook-form look like this, thank you a lots

Luis Rodrigues · Accepted Answer · 2022-04-13 08:11:51Z

47

Check the docs (V7): https://react-hook-form.com/api/useform/register

<input
  type="number"
  {...register("test", {
    valueAsNumber: true,
  })}
/>

If not using type="number"

<input
  {...register("test", {
    valueAsNumber: true,
    pattern:{
       value: /^(0|[1-9]\d*)(\.\d+)?$/
    },
  })}
/>

You can still use validate.

<input
  {...register("test", {
    valueAsNumber: true,
    validate: (value) => value > 0,
  })}
/>

edited Apr 13, 2022 at 8:11

answered Feb 5, 2022 at 14:03

Luis Rodrigues

5394 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

AdamE Over a year ago

why one has to add { valueAsNumber: true } is beyond when the type is specified as number in often more than one place already? But this worked for me and got me passed 48 hours of being blocked!

Luis Rodrigues Over a year ago

stackoverflow.com/questions/35791767/… this one may help people to understand a little further that @AdamE

Old Starchy Sep 24 at 3:06

Fixed docs link: https://www.react-hook-form.com/api/useform/register/ (needs trailing slash)

Thales · Accepted Answer · 2023-12-31 20:50:50Z

9

this work for me

<Controller
    control={form.control}
    name="milhas"
    render={({ field }) => {
        return ( <input type="number"
                   {...field} 
                   onChange={(value) =>
                   field.onChange(value.target.valueAsNumber)
                }
                 />
             )
          }}
</Controller>

answered Dec 31, 2023 at 20:50

Thales

1311 silver badge4 bronze badges

Comments

knoefel · Accepted Answer · 2021-12-12 15:26:10Z

6

Solution for integers only

You can just set <TextField /> prop type to number and then there will be only numbers allowed.

<Controller
  control={control}
  name={name}
  render={({ field: { onChange, value }, fieldState: { error } }) => (
    <TextField
      {...restProps}
      onChange={onChange}
      value={value}
      fullWidth
      label="Times"
      defaultValue={defaultValue}
      type="number"
      error={error && error.message}
    />
  )}
  defaultValue={defaultValue}
/>

Solution for leading zeros or exponent

As noted in the comments here is a version accepting also leading zeros or exponent notation by using RHF's validate function.

const validate = (value: string) => {
  const matches = value.match(
    /^(?:0\.(?:0[0-9]|[0-9]\d?)|[0-9]\d*(?:\.\d{1,2})?)(?:e[+-]?\d+)?$/
  );
  return matches?.length > 0 || "Not a Number";
};

return (
  <Controller
    control={control}
    name={name}
    rules={{ validate }}
    render={({ field: { onChange, value }, fieldState: { error } }) => (
      <TextField
        {...restProps}
        onChange={onChange}
        value={value}
        fullWidth
        label="Times"
        error={!!error}
      />
    )}
    defaultValue={defaultValue}
  />
);

edited Dec 12, 2021 at 15:26

answered Sep 29, 2021 at 6:33

knoefel

7,0383 gold badges39 silver badges53 bronze badges

7 Comments

CODEforDREAM Over a year ago

But can i use this on react-native?

knoefel Over a year ago

Yes, you can. Do you need to support decimals as well or only integer values?

CODEforDREAM Over a year ago

Thanks, no, it accept only number for 6 number validation 😁

Katzhuu Over a year ago

This works unless you need to have leading zeroes included. type='number' strips leading zeroes as input value is considered a number.

Akinjiola Toni Over a year ago

Your solution does not work when you press the e character.

|

user42488 · Accepted Answer · 2022-04-04 08:56:52Z

6

Using react-hook-form v7 this is working for me:

<input {...register('age', {
    pattern: {
        value: /^[0-9]+$/,
        message: 'Please enter a number',
    },
})} />

edited Apr 4, 2022 at 8:56

answered Dec 1, 2021 at 17:38

user42488

1,49521 silver badges30 bronze badges

Comments

Sukesh · Accepted Answer · 2021-09-29 04:01:57Z

5

use something liket this

const allowOnlyNumber=(value)=>{
   return value.replace(/[^0-9]/g, '')
}

return (
    <Controller
      control={control}
      name={name}
      render={({ field: { onChange, value }, fieldState: { error } }) => (
        <TextField
          {...restProps}
          onChangeText={(text)=>onChange(allowOnlyNumber(text))}
          value={value}
          defaultValue={defaultValue}
          error={(error && error.message) as TxKeyPath}
        />
      )}
      defaultValue={defaultValue}
    />
  )

answered Sep 29, 2021 at 4:01

Sukesh

1971 gold badge4 silver badges15 bronze badges

1 Comment

CODEforDREAM Over a year ago

thank for your answer, but unfortunately , i can't input any number after doing this, maybe it require onChange

RJA · Accepted Answer · 2023-04-15 15:43:50Z

Little late to the party, but I did this.

              <Controller
                  control={control}
                  {...register(`userPreferredStakes.${x}.prefStake`)}
                  name={`userPreferredStakes.${x}.prefStake`}
                  render={({ field: { onChange, onBlur, value } }) => (
                    <TextField
                     id="standard-basic" 
                     placeholder="Stake(£)" 
                     variant="standard"
                     type='number' 
                     value={getValues(`userPreferredStakes.${x}.prefStake`)} 
                     onChange={(e) => onChange(+e.target.value)}
                    />
                  )}
                />

Note: type='number' & onChange={(e) => onChange(+e.target.value)}` allows me to save the item, and when logging the saved data I get the following.

userPreferredStakes:Array(13)
0:{oddsLow: 0, oddsHigh: 2, prefStake: 300}
1: {oddsLow: 2.01, oddsHigh: 3, prefStake: 200}
  ....

whereas not adding the + within onChange I would have gotten

userPreferredStakes:Array(13)
0:{oddsLow: 0, oddsHigh: 2, prefStake: '300'}
1: {oddsLow: 2.01, oddsHigh: 3, prefStake: '200'}
  ....

Collectives™ on Stack Overflow

How to input only number in react-hook-form

6 Answers 6

3 Comments

Comments

7 Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

Comments

7 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related