How can I implement form validation in a TypeScript React app?

How can I implement form validation in a TypeScript React app?

You can use libraries like Formik or React Hook Form for managing form state and validation in TypeScript.

Can you show me an example using React Hook Form?

Sure! First, install React Hook Form: npm install react-hook-form. Then, you can create a form like this:

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

const MyForm = () => {
  const { register, handleSubmit, formState: { errors } } = useForm();

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('username', { required: true })} />
      {errors.username && <span>This field is required</span>}
      <input type="submit" />
    </form>
  );
};

This will validate that the username field is required.

What about custom validation rules?

You can add custom validation rules by using the validate option in the register method. For example:

<input {...register('username', { 
  required: true, 
  validate: value => value.length >= 5 || 'Username must be at least 5 characters' 
})} />