how to show value in input field limit upto 2 for decimal values

[kishan143-jaiswal]

         <input
        type="text"
        className="form-control grading-text"
        name={`pomLibraries.${nestIndex}.gradings.${k}.measurment`}
        {...register(`pomLibraries[${nestIndex}].gradings[${k}].measurment`, {
            required: true,
            messsage: "required",
            onBlur: (e) => findFractionDiff(nestIndex, true),
            setValueAs: (v) => Math.floor(v * 100) / 100,
        })}
        defaultValue={item?.measurment ? item?.measurment : 0}
        />;

i want to show in disabled input field limit upto 2 for decimal values

[bluebill1049]

you will need to use a mask input to achieve that and wrapped with Controller or hook useController

[Cants820]

i am having the same issue with regular inputs ? How would you go about using mask ? I seen examples of people using react-input-mask.

[mocarram]

Anyone visiting this in 2023 or later, you can use a pattern to restrict it. also use step="any" or step="0.01".

pattern: {
         value: /^\d+(\.\d{1,2})?$/,
         message: ' Maximum two decimal places allowed.'
 }

[hughesthatgirl]

@mocarram

Thanks for the pattern! Do you by any chance know how to write this so that the "2" can be a variable. I am in a situation where we are getting the allowed decimal places from an API so I would like to do something like this:

pattern: {
         value: `/^\d+(\.\d{1,${variable}})?$/`,
         message: ' Maximum two decimal places allowed.'
 }

[mocarram]

pattern: {
         value: myPattern,
         message: ' Maximum two decimal places allowed.'
 }

Set pattern myPattern to anything that is a valid regex like you can update the value of myPattern based on some other value. you can run a function on it as well and update the pattern. meaning you can also use myPattern(dynamicValue) and construct the regex in that function. Let me know if it works.

[hughesthatgirl]

Thanks for the quick reply. I can't seem to get the regex part to work correctly... /^\d+(\.\d{1,${value}})?$/
When I pass in a value (I am passing in this value from a prop in my component called decimalPlace) it doesn't seem to be getting picked up.

function RegisterInput({
	id,
	type,
	name,
	label,
	placeholder,
	hideLabel = false,
	register,
	errors,
	isRequired = false,
	maximLength,
	minimLength,
	isDisabled,
	validateFunction,
	onChangeFunction,
        decimalPlace,
}) {
	return (
		<div className='input__container'>
			<Label
				labelFor={id}
				visuallyHidden={hideLabel}
				label={label ? label : name}
				invalid={
					errors[name] &&
					isRequired &&
					errors[name].type === 'required'
						? true
						: false
				}
				isRequired={isRequired}
			/>

			<p className='input__error'>
				{errors[name] && errors[name].message}
			</p>
			<input
				id={id}
				className={!errors[name] ? `input` : `input input__invalid`}
				type={type}
				placeholder={placeholder}
				defaultValue={value}
				disabled={isDisabled}
				onChange={onChangeFunction}
				{...register(name, {
					onChange: onChangeFunction,
					required: isRequired,
					max: {
						value: maximLength,
						message: `Value must be no more than ${maximLength} characters long`,
					},
					min: {
						value: minimLength,
						message: `Value must be at least ${minimLength} characters long`,
					},
                                       pattern: {
                                           value: () => {
                                                  return /^\d+(\.\d{1,${decimalPlace}})?$/
                                            },
                                          message: `Maximum ${decimalPlace} decimal places allowed.`
                                    },
					validate: validateFunction,
				})}
			/>
		</div>
	);
}



export default RegisterInput;

[mocarram]

You can simply do this:

const decimalCheck = decimalPlace && /^\d+(\.\d{1,${decimalPlace}})?$/; or if doesn't work set it to state variable or from useEffect; Normally doing so should work fine. I have done that. Remember you can also set decimalPlace to 0 so in that case don't use the decimalPlace && part

pattern: decimalCheck;

[onionhammer]

Note this doesnt work if you use valueAsNumber.