2.5.0 (2021-05-13)

Features

computed-types resolver (#162) (85e5e7d)

import React from 'react';
import { useForm } from 'react-hook-form';
import { computedTypesResolver } from '@hookform/resolvers/computed-types';
import Schema, { number, string } from 'computed-types';

const schema = Schema({
  username: string.min(1).error('username field is required'),
  password: string.min(1).error('password field is required'),
  password: number,
});

const App = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({
    resolver: computedTypesResolver(schema),
  });

  return (
    <form onSubmit={handleSubmit((d) => console.log(d))}>
      <input {...register('name')} />
      {errors.name?.message && <p>{errors.name?.message}</p>}
      <input type="number" {...register('age', { valueAsNumber: true })} />
      {errors.age?.message && <p>{errors.age?.message}</p>}
      <input type="submit" />
    </form>
  );
};

export default App;

resolvers - v2.4.0

Published by github-actions[bot] over 3 years ago

2.4.0 (2021-04-17)

Features

nope resolver (#158) (c8b961b)

import React from 'react';
import { useForm } from 'react-hook-form';
import { nopeResolver } from '@hookform/resolvers/nope';
import Nope from 'nope-validator';

const schema = Nope.object().shape({
  name: Nope.string().required(),
  age: Nope.number().required(),
});

const App = () => {
  const { register, handleSubmit } = useForm({
    resolver: nopeResolver(schema),
  });

  return (
    <form onSubmit={handleSubmit((d) => console.log(d))}>
      <input name="name" ref={register} />
      <input name="age" type="number" ref={register} />
      <input type="submit" />
    </form>
  );
};

export default App;

resolvers - v2.3.2

Published by github-actions[bot] over 3 years ago

2.3.2 (2021-04-16)

Bug Fixes

errors with criteriaMode: 'all' (#157) (2ff9b66)

resolvers - v2.3.1

Published by github-actions[bot] over 3 years ago

2.3.1 (2021-04-15)

Bug Fixes

yupResolver: multiple errors messages with same type (#156) (4f87888), closes #155

resolvers - v2.3.0

Published by github-actions[bot] over 3 years ago

2.3.0 (2021-04-13)

Features

io-ts resolver (#152) (73dfad7) Huge thanks to @euphocat

import React from 'react';
import { useForm } from 'react-hook-form';
import { ioTsResolver } from '@hookform/resolvers/io-ts';
import t from 'io-ts';
// you don't have to use io-ts-types but it's very useful
import tt from 'io-ts-types';

const schema = t.type({
  username: t.string,
  age: tt.NumberFromString,
});

const App = () => {
  const { register, handleSubmit } = useForm({
    resolver: ioTsResolver(schema),
  });

  return (
    <form onSubmit={handleSubmit((d) => console.log(d))}>
      <input name="username" ref={register} />
      <input name="age" type="number" ref={register} />
      <input type="submit" />
    </form>
  );
};

export default App;

resolvers - v2.2.0

Published by github-actions[bot] over 3 years ago

2.2.0 (2021-04-10)

Features

class-validator: add criteriaMode: all support (#151) (5f806f8)

Bug Fixes

class-validator: fix nested errors (#151) (5f806f8)

Performance Improvements

class-validator: reduce bundle size (#151) (5f806f8)

resolvers - v2.1.0

Published by github-actions[bot] over 3 years ago

2.1.0 (2021-04-09)

Features

class-validator resolver 🎉 (#147) (defa00b) Huge thanks to @mzalevski

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;