import 'reflect-metadata';
import React from 'react';
import { useForm } from 'react-hook-form';
import { classValidatorResolver } from '@hookform/resolvers/class-validator';
import { Length, Min, IsEmail } from 'class-validator';

class User {
  @Length(2, 30)
  username: string;

  @Min(18)
  age: number;

  @IsEmail()
  email: string;
}

const App = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<User>({ resolver:  classValidatorResolver(User) });

  return (
      <form onSubmit={handleSubmit((data) => console.log(data))} >
        <input type="text" {...register('username')} />
        {errors.username && <span>{errors.username.message}</span>}

        <input type="text" {...register('email')} />
        {errors.email && <span>{errors.email.message}</span>}

        <input type="number" {...register('age', { valueAsNumber: true })} />
        {errors.age && <span>{errors.age.message}</span>}

        <input type="submit" value="Submit" />
      </form>
  );
};

export default App;