Antd Form with React hook form

Question

I am trying to use antd form with react-hook-form but couldn't get it to work.

Basically I am using a theme with antd and want to integrate react-hook-form for better validation and other things. So far this is the code

import { Button, Form, Input, Message, Row, Tooltip } from "antd";
import { useForm, Controller } from "react-hook-form";
import {
  EyeTwoTone,
  MailTwoTone,
  PlaySquareTwoTone,
  QuestionCircleTwoTone,
  SkinTwoTone,
} from "@ant-design/icons";
import Link from "next/link";
import Router from "next/router";
import styled from "styled-components";

const FormItem = Form.Item;

const Content = styled.div`
  max-width: 400px;
  z-index: 2;
  min-width: 300px;
`;

const Register = (props) => {
  const defaultValues = {
    name: null,
    phone: null,
    email: null,
    password: null,
    confirmPassword: null,
    checked: false,
  };

  const { handleSubmit, reset, watch, control, errors, getValues } = useForm({
    defaultValues,
  });
  // const { register, errors, handleSubmit, control } = useForm({
  //    mode: 'onChange',
  // });

  const onSubmit = async (data) => {
    try {
      console.log("data", data);
    } catch (err) {
      console.log("err", err);
    }
  };

  return (
    <Row
      type="flex"
      align="middle"
      justify="center"
      className="px-3 bg-white"
      style={{ minHeight: "100vh" }}
    >
      <Content>
        <div className="text-center mb-5">
          <Link href="/signup">
            <a className="brand mr-0">
              <PlaySquareTwoTone style={{ fontSize: "32px" }} />
            </a>
          </Link>
          <h5 className="mb-0 mt-3">Sign up</h5>

          <p className="text-muted">create a new account</p>
        </div>
        <Form layout="vertical" onSubmit={handleSubmit(onSubmit)}>
          <Controller
            as={
              <FormItem
                label="Email"
                name="email"
                rules={[
                  {
                    type: "email",
                    message: "The input is not valid E-mail!",
                  },
                  {
                    required: true,
                    message: "Please input your E-mail!",
                  },
                ]}
              >
                <Input
                  prefix={<MailTwoTone style={{ fontSize: "16px" }} />}
                  type="email"
                  placeholder="Email"
                />
              </FormItem>
            }
            control={control}
            name="select"
          />

          {/* <Input inputRef={register} name="input" /> */}

          <button type="button" onClick={() => reset({ defaultValues })}>
            Reset
          </button>
          <input type="submit" />
        </Form>
      </Content>
    </Row>
  );
};

export default Register;

Now, as you can see I am having regular form tag and inside that the input field. But using the regular form, I am not getting the layout props provided by the antd forms. Also I am not able to get the values during submit.

So my question is that how can I use AntD form component with react hook form so i can use the benefits of react-hook0form as well a Antd styling.

Answer 1

You can simply use the built-in useForm method of ant design, no need to pull in a thirdparty. It looks like:

const [form] = Form.useForm();

Also Form has onFinish method not onSubmit in ant, at least in version 4.

Answer 2

Use controller wrapper from react-hook-form, documentation link

Import Controller

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

Call control from useForm

const { handleSubmit, control } = useForm();

Your Input

<Form.Item label="Email">
  <Controller
   name="email"
   defaultValue=""
   control={control}
   render={({ onChange, value }) => (
     <Input onChange={onChange} value={value} />
   )}/>        
</Form.Item>