ref
React.Ref
React element ref
<input {...register("test")} />
required
boolean
A Boolean which, if true, indicates that the input must have a value before the form can be submitted. You can assign a string to return an error message in the errors
object.
Note: This config aligns with web constrained API for required input validation, for object
or array
type of input use validate
function instead.
<input {...register("test", { required: true })} />
maxLength
The maximum length of the value to accept for this input.number
<input {...register("test", { maxLength: 2 })} />
minLength
The minimum length of the value to accept for this input.number
<input {...register("test", { minLength: 1 })} />
max
The maximum value to accept for this input.number
<input type="number" {...register('test', { max: 3 })} />
min
The minimum value to accept for this input.number
<input type="number" {...register("test", { min: 3 })} />
pattern
RegExp
The regex pattern for the input.
Note: A RegExp object with the /g flag keeps track of the lastIndex where a match occurred.
<input {...register("test", { pattern: /[A-Za-z]{3}/ })} />
validate
Function | Object
You can pass a callback function as the argument to validate, or you can pass an object of callback functions to validate all of them. This function will be executed on its own without depending on other validation rules included in the required
attribute.
Note: for object
or array
input data, it’s recommended to use the validate
function for validation as the other rules mostly apply to string
, string[]
, number
and boolean
data types.
<input {...register("test", { validate: value => value === '1' })} /> // object of callback functions <input {...register("test1", { validate: { positive: v => parseInt(v) > 0, lessThanTen: v => parseInt(v) < 10, checkUrl: async () => await fetch(), } })} />
valueAsNumber:boolean
Returns a Number normally. If something goes wrong NaN
will be returned.
-
valueAs
process is happening before validation. -
Only applicable and support to <input type=”number” /> , but we still cast to number type without trim or any other data manipulation.
- Does not transform
defaultValue
ordefaultValues
.
<input type="number" {...register("test", { valueAsNumber: true, })} />
valueAsDate:boolean
Returns a Date
object normally. If something goes wrong Invalid Date
will be returned.
-
valueAs
process is happening before validation. -
Only applies to <input /> .
- Does not transform
defaultValue
ordefaultValues
.
<input type="date" {...register("test", { valueAsDate: true, })} />
setValueAs:<T>(value: any) => T
Return input value by running through the function.
-
valueAs
process is happening before validation. Also,setValueAs
is ignored if eithervalueAsNumber
orvalueAsDate
aretrue
. -
Only applies to text input.
- Does not transform
defaultValue
ordefaultValues
.
<input type="number" {...register("test", { setValueAs: v => parseInt(v), })} />
disabled
boolean = false
Set disabled
to true
will lead input value to be undefined
and input control to be disabled.
Disabled
prop will also omit build-in validation rules.
For schema validation, you can leverage the undefined
value returned from input or context object.
<input {...register("test", { disabled: true })} />
onChange
(e: SyntheticEvent) => void
onChange
function event to be invoked in the change event.
register('firstName', { onChange: (e) => console.log(e) })
onBlur
(e: SyntheticEvent) => void
onBlur
function event to be invoked in the blur event.
register('firstName', { onBlur: (e) => console.log(e) })
value
unknown
Set up value for the registered input. This prop should be utilised inside useEffect
or invoke once, each re-run will update or overwrite the input value which you have supplied.
register('firstName', { value: 'bill' })
shouldUnregister:boolean
Input will be unregistered after unmount and defaultValues will be removed as well.
Note: this prop should be avoided when using with useFieldArray
as unregister
function gets called after input unmount/remount and reorder.
<input {...register("test", { shouldUnregister: true, })} />
deps:string | string[]
Validation will be triggered for the dependent inputs,it only limited to register
api not trigger
.
<input {...register("test", { deps: ['inputA', 'inputB'], })} />