useForm – register

Posted on by mtoplistChuyên mục:Top List
NameDescriptionCode Examplesref
React.RefReact 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
numberThe maximum length of the value to accept for this input.

<input
  {...register("test", {
      maxLength: 2
  })}
/>

minLength
numberThe minimum length of the value to accept for this input.

<input
  {...register("test", {
    minLength: 1
  })}
/>

max
numberThe maximum value to accept for this input.

<input
  type="number"
  {...register('test', {
    max: 3
  })}
/>

min
numberThe minimum value to accept for this input.

<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 or defaultValues.

<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 or defaultValues.

<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 either valueAsNumber or valueAsDate are true.

  • Only applies to text input.

  • Does not transform defaultValue or defaultValues.

<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'],
  })}
/>

mtoplist