Skip to main content

useForm

useForm is a hook for defining, validating and submitting forms.

Submit feedback
Edit this page
github
View source code
import { useForm } from '@uhg-abyss/mobile';

Usage​

The useForm hook is used to define, validate, and submit forms in Abyss. Use useForm along with the FormProvider component in order to better manage your forms and fully utilize the capabilities of form management within Abyss. Abyss components that can be used with useForm have a model prop that is used to bind the component to the form state. Validations can be defined on each component using the validations prop, which accepts an object with validation rules. If a component fails validation, it will display an error message based on the validation rules defined. When a form is successfully submitted, the function passed to the onSubmit prop will be called with the form data.

Default Values​

The defaultValues prop populates the entire form with default values. It supports both synchronous and asynchronous assignments of default values.

Form State​

This object contains information about the form state. If you want to subscribe to formState via useEffect, make sure that you place the entire formState in the optional array.

const form = useForm();


const {
  errors, // An object with field errors
  isDirty, // Set to true after the user modifies any of the inputs.
  isValid, // Set to true if the form doesn't have any errors.
  isValidating, // Set to true during validation.
  isSubmitting, // true if the form is currently being submitted; false if otherwise.
  isSubmitted, // Set to true after the form is submitted.
  isSubmitSuccessful, //	Indicate the form was successfully submitted without any Promise rejection or Error being thrown within the handleSubmit callback.
  submitCount, //	Number of times the form was submitted.
  touchedFields, // An object containing all the inputs the user has interacted with.
  dirtyFields, // An object with the user-modified fields.
} = form.formState;

Watch​

This will watch specified inputs and return their values. It is useful for determining what to render.

Handle Submit​

This function will receive the form data if form validation is successful.

Validate Model​

This function will receive the model data if form validation is successful.

Set Error​

The function allows you to manually set one or more errors.

Clear Errors​

This function can manually clear errors in the form.

Get Values​

An optimized helper for reading form values. The difference between watch and getValues is that getValues will not trigger re-renders or subscribe to input changes.

Trigger​

Manually triggers form or input validation. This method is also useful when you have dependent validation (input validation depends on another input's value).

Cross-Field Validation Example​

Additional Documentation​

@uhg-abyss/mobile/hooks/useForm is a built on top of the useForm hook from React Form Hook.

Note: You should be using Abyss's useForm hook when using Abyss components and not react hook forms.

Table of Contents