2.1.0 (2021-04-09)
Features
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;