Session 05: Forms

Installation

npm install react-hook-form

hoặc

yarn add react-hook-form

Basic Usage

import { useForm, SubmitHandler } from 'react-hook-form';

type Inputs = {
  fullname: string;
  address: string;
};

export default function MyForm() {
  const {
    register,
    handleSubmit,
    watch,
    formState: { errors },
  } = useForm<Inputs>();

  const onSubmit: SubmitHandler<Inputs> = (data) => {
    return console.log(data);
  };

  console.log(watch('fullname')); // watch input value by passing the name of it

  return (
    /* "handleSubmit" will validate your inputs before invoking "onSubmit" */

    <form onSubmit={handleSubmit(onSubmit)}>
      <div style={{ display: 'flex', flexDirection: 'column', maxWidth: 420, gap: 8 }}>
        {/* FULLNAME */}

        {/* register your input into the hook by invoking the "register" function */}
        <label htmlFor='fullname'>Fullname</label>
        <input {...register('fullname', { required: true })} id='fullname' />
        {/* errors will return when field validation fails  */}
        {errors.fullname && <span>Fullname is required</span>}

        {/* ADDRESS */}
        <label htmlFor='address'>Address</label>
        {/* include validation with required or other standard HTML validation rules */}
        <input defaultValue='38 Yên Bái' {...register('address')} id='address' />

        <input type='submit' />
      </div>
    </form>
  );
}

Handle errors

React Hook Form provides an errors object to show you the errors in the form. errors' type will return given validation constraints. The following example showcases a required validation rule.

import { useForm } from 'react-hook-form';

export default function Demo() {
  const {
    register,
    formState: { errors },
    handleSubmit,
  } = useForm();
  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('firstName', { required: true })} aria-invalid={errors.firstName ? 'true' : 'false'} />
      {errors.firstName?.type === 'required' && <p role='alert'>First name is required</p>}

      <input {...register('mail', { required: 'Email Address is required' })} aria-invalid={errors.mail ? 'true' : 'false'} />
      {errors.mail && <p role='alert'>{errors.mail.message}</p>}

      <input type='submit' />
    </form>
  );
}

Schema Validation

Step1: Install Yup & @hookform/resolvers

https://github.com/jquense/yup

npm install @hookform/resolvers yup

hoặc

yarn add @hookform/resolvers yup

Step2: Create schema validation

import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';

const schema = yup
  .object({
    firstName: yup.string().required(),
    age: yup.number().positive().integer().required(),
  })
  .required();

export default function Demo() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({
    resolver: yupResolver(schema),
  });
  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('firstName')} />
      <p>{errors.firstName?.message}</p>

      <input {...register('age')} />
      <p>{errors.age?.message}</p>

      <input type='submit' />
    </form>
  );
}